Angular bootstrap carousel digest

时间:2015-04-12 10:28:03

标签: angularjs twitter-bootstrap angular-ui-bootstrap digest

如何在每次滑动到新图像时阻止轮播触发完整的摘要周期并重新运行我的收集过滤器。

下面的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>

1 个答案:

答案 0 :(得分:1)

如果您的收藏不会改变,您可以使用一次性绑定:

<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()"

这是一个内置角度指令和幕后角度使用$apply,所以我无法看到任何方法来避免旋转木马指令的完全摘要。

这是角度代码:

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);
              }
            });
          };
        }
      };
    }];
  }
);