Angular ui轮播绑定重复调用

Question

我创建了一个简单的 plunkr 来尝试理解为什么范围函数在 angular ui 轮播上触发这么多次。

html 如下所示

<div uib-carousel id="myC" interval="myInterval">
      <div uib-slide ng-repeat="slide in slides" active="slide.active">
        <img ng-src="{{slide.image}}" style="margin:auto;">
        <div class="carousel-caption">
          <h4>Slide {{$index}}</h4>
          <p>{{slide.text}}</p>
          <p>{{hurro()}}</p>
        </div>
      </div>
</div>

当您点击转盘上的下一步时，scope.hurro 被调用大约 40 次。为什么会发生这种情况，我该如何预防？

Answer 1

在你的控制器中尝试这样，这可能无法解决你的确切问题，但可以给你一些想法。

我检查了控制台，event.preventDefault called 增加了 44 次，但控制台消息只被调用一次。

 $scope.hurro = function() {
      console.log('called once with event.preventDefault();');
      console.log('called 44 times without event.preventDefault();');

      $scope.called = $scope.called+1; // but in either case 
                                       // called parameter 
                                       // is getting incremented to 44
    event.preventDefault();

}

plkrhere

Answer 2

它的发生是因为视图中的这些表达式：

{{called}}
{{hurro()}}

当您将这些表达式添加到视图时，angular 会注册观察器函数以观察它们的变化并相应地更新视图。好吧，因为这些观察者本身可以更改模型，例如 hurro()，它会增加调用的值，以确保视图和模型全部同步，angular 会继续执行观察者，直到模型稳定。但是 hurro() 观察者每次都会更改模型，因此模型永远不会变得稳定。这会导致无限循环，进而导致错误消息，如您在检查控制台时所见：https://docs.angularjs.org/error/$rootScope/infdig

删除 {{called}} 表达式可以解决问题，如您在此更新后看到的 plunkr

因此，通过跟踪问题，有点有趣的是你造成了它。

Angular ui轮播绑定重复调用

Angular ui carousel binding repeated called

angularjs

angular-ui-bootstrap