Question

我开始学习使用angular的ui bootstrap库并尝试使用popover工作。我在设置中遗漏了什么吗？

我提供了一个掠夺者的例子。我的要求是在表格中的单元格上设置一个弹出窗口，每秒刷新$ interval。

http://plnkr.co/edit/hF3EDIRfKA1VOfSennZq?p=preview

<!DOCTYPE html>
<html ng-app="test">
<head>
<meta charset="UTF-8">
<title>angular-test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.2/ui-bootstrap-tpls.min.js"></script>  

<script type="text/javascript">

    var app = angular.module("test", ['ngAnimate', 'ui.bootstrap']);

    app.controller("testCtrl", function($scope, $interval) {

        var stats = [{
                "name": "john",
                "stat1": 3,
                "stat2": 5
            }];

        var count = 0;
        $scope.getTestInfo = function() {
            $scope.count = count++;
            $scope.stats = stats;
        }

        $interval(function(){$scope.getTestInfo();}, 1000);
    });
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
    <div class="col-lg-4" ng-controller="testCtrl" ng-init="count=0">
        <table id="table1" class="table table-hover table-condensed">
            <thead>
            <tr>
                <th>column1</th>
                <th>column2</th>
                <th>column3</th>
            </tr>
            </thead>
            <tbody class="bg-info">
            <tr ng-repeat="stat in stats">
                <td uib-popover="testcolumn1">{{stat.name}}</td>
                <td uib-popover="{{stat.stat1}}">{{stat.stat1 + count}}</td>
                <td uib-popover="testcolumn3">{{stat.stat2}}</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
</div>
</body>
</html>

Answer 1

您只需要为弹出模式添加元数据（popover-trigger等）。我把你的傻瓜分开来示范。 http://plnkr.co/edit/d1eAf2NEAA9mCXmNN5LC?p=preview

角度ui bootstrap popover无法正常工作

1 个答案: