0

Ich benutze angularjs bootstrap popover in einer Tabelle.Angularjs bootstrap popover blinken nach dem Modellwechsel

Die Tabelle wird mit ng-repeat gefüllt und wenn das Popover geöffnet ist und ich neue Daten in die Tabelle bekomme, flackert das Popover.

Hier ist ein funktionierendes Beispiel Pknkr

Jeder Gedanke auf, wie kann ich das Flimmern verhindern?

<!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> 

Und die 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); 
}); 
+0

Flimmern geschieht aufgrund dieses: $ Intervall ($ scope .updateList, 500,0); Kann ich im Detail wissen, was Sie mit diesem Intervall machen wollen? –

+0

das Intervall wird benötigt, es aktualisiert die Tabellendaten vom Server – yossi

+0

ok und Sie möchten Daten innerhalb von 5 Sekunden aktualisieren .. –

Antwort

1

ich diesen Gedanken helfen könnten Sie read here im Detail bitte ..

enter image description here

Verwandte Themen