2015-10-26 102 views
0

我開始學習使用angular的ui bootstrap庫並嘗試獲取popover工作。我在設置中丟失了什麼?角ui bootstrap popover不起作用

我提供了一個plunker示例。我的要求是在表格中的單元格上進行彈出操作,每秒刷新一次$ 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> 

回答

1

你只需要添加元數據(popover-trigger等),爲酥料餅模態。我分出你的朋友來演示。 http://plnkr.co/edit/d1eAf2NEAA9mCXmNN5LC?p=preview

+0

謝謝!這絕對解決了我的掠奪者例子,並且完全按照我想要的方式工作。但是當我在我的應用程序上嘗試它時,每次調用$ interval時,popover似乎都在「閃爍」。這裏是我的應用程序的精簡版。我已經把它放在重擊器中,如果你把鼠標懸停在錯誤單元格上,你會看到彈出式消音器.. http://plnkr.co/edit/g68EEdC8Wq5eFPQG2ciG?p=preview – bobby

+0

你的'var stats'在頂部的腳本不在角度名稱空間之內。直接將包含在該變量中的數組賦值給'$ scope'(這正是你應該做的事情),解決了這個問題。在你的例子中,http://plnkr.co/edit/KDsE4GPEhwTpubEcq5jK?p=preview –

+0

,你是否改變了沉睡者?你能提供一個例子嗎? – bobby