2015-04-12 74 views
1

如何防止傳送帶啓動完整摘要循環,並在每次滑動到新圖像時重新運行我的收集過濾器。Angular Bootstrap傳送帶摘要

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

如果您收藏都不會改變,你可以使用一次性綁定:

<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,所以我不能看到任何方式來避免對carousel指令進行全面摘要。

這裏是角碼:

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

不幸的是一次性的收集綁定也不會好,因爲我需要集合中的添加/刪除/編輯項目。我查看了Github https://github.com/angular-ui/bootstrap/blob/master/src/carousel/carousel.js上的輪播代碼,但無法看到任何使用$ appy的代碼。 –

+0

哦,這太爛了:(但至少它解釋了爲什麼我的過濾器不斷重新運行,非常感謝幫助。我想我會在這種情況下尋找一些其他的旋轉木馬解決方案:) –

+0

哦,事實證明,它是甚至這個問題太https://github.com/revolunet/angular-carousel –