i using angularjs bootstrap popover inside table.
the table populated using ng-repeat , if popover open , new data table there flicker popover.
here working example pknkr
any thought on how can prevent flicker ?
<!doctype html> <html ng-app="ui.bootstrap.demo"> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.js"></script> <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.0.0.js"></script> <script src="example.js"></script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div ng-controller="popoverdemoctrl"> <br/> <br/> <table> <tr ng-repeat="item in list"> <td> <button uib-popover-template="dynamicpopover.templateurl" popover-is-open="aux.openpopoverid==item.id" ng-click="aux.openpopoverid=item.id" popover-placement="right" type="button" class="btn btn-link"> popover </button> </td> </tr> </table> <script type="text/ng-template" id="mypopovertemplate.html"> <div>{{dynamicpopover.content}}</div> <div class="form-group"> <label>popup title:</label> <input type="text" ng-model="dynamicpopover.title" class="form-control"> </div> </script> </div> </body> </html> and js
angular.module('ui.bootstrap.demo', ['nganimate', 'ui.bootstrap']); angular.module('ui.bootstrap.demo').controller('popoverdemoctrl', function ($scope,$interval, $sce) { $scope.dynamicpopover = { templateurl: 'mypopovertemplate.html', title: 'title' }; $scope.list = [{'id':1},{'id':2},{'id':3}]; $scope.aux = {'openpopoverid':2}; $scope.updatelist = function(){ $scope.list = [{'id':1},{'id':2},{'id':3}]; } $interval($scope.updatelist,500,0); });
i thought please read here in detail..
Comments
Post a Comment