Angular bootstrap 轮播摘要

Question

如何防止轮播在每次滑动到新图像时触发完整的摘要循环和 re-running 我的 collection 过滤器。

如果您单击一个项目并查看日志，下面的 plunker 显示了我的意思。 http://plnkr.co/edit/X062Xr90G807uqURqts9?

<carousel disable-ng-animate ng-click="$event.stopPropagation();" interval="5000">
        <slide ng-repeat="photo in object.photos" active="photo.active">
            <img ng-src="{{photo.getUrl({'maxWidth': 350, 'maxHeight': 250})}}" style="margin:auto;">
        </slide>
    </carousel>

Answer 1

如果你的collection不会改变，你可以使用one-time-binding：

<div ng-repeat="item in ::collection | example" ng-click="setSelected(item)">

这里是updated plunker

但如果对你不好，你必须进入carousel指令，看看你是否看到$apply。
$apply 将导致 $rootScope.$digest，因此 filter 将因任何更改而触发。

编辑

查看 carousel.html（指令模板）后

可以看到ng-mouseenter="pause()" ng-mouseleave="play()".

这是一个 build-in angular 指令，在幕后 angular 使用 $apply，所以我看不出有什么方法可以避免 full-digest 在轮播指令上。

这里是 angular 代码：

forEach(
  'click dblclick mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave keydown keyup keypress submit focus blur copy cut paste'.split(' '),
  function(eventName) {
    var directiveName = directiveNormalize('ng-' + eventName);
    ngEventDirectives[directiveName] = ['$parse', '$rootScope', function($parse, $rootScope) {
      return {
        restrict: 'A',
        compile: function($element, attr) {
          // We expose the powerful $event object on the scope that provides access to the Window,
          // etc. that isn't protected by the fast paths in $parse.  We explicitly request better
          // checks at the cost of speed since event handler expressions are not executed as
          // frequently as regular change detection.
          var fn = $parse(attr[directiveName], /* interceptorFn */ null, /* expensiveChecks */ true);
          return function ngEventHandler(scope, element) {
            element.on(eventName, function(event) {
              var callback = function() {
                fn(scope, {$event:event});
              };
              if (forceAsyncEvents[eventName] && $rootScope.$$phase) {
                scope.$evalAsync(callback);
              } else {
                scope.$apply(callback);
              }
            });
          };
        }
      };
    }];
  }
);

Angular bootstrap 轮播摘要

Angular bootstrap carousel digest

digest

twitter-bootstrap

angularjs

angular-ui-bootstrap