如何使用隔離範圍提高角度指令中雙向綁定的性能？

我有一個指令'sim-grab'，它會爲一組信息圖塊上的自定義事件'pointOver'&'pointOut'添加事件處理程序。當這些事件被觸發時，我需要在信息圖塊的頂部顯示可視化。如何使用隔離範圍提高角度指令中雙向綁定的性能？

信息圖塊使用ng-repeat填充。我面臨的問題是在這些可視化中出現了一個小的延遲（超過700毫秒）。請注意，「pointOver/Out」事件可以在一秒鐘內多次觸發。

如果有人能告訴我我是否在下面的代碼中採用了錯誤的方法，那將會很棒。

指令：

.directive('simGrab', function(){ 
    return { 
     restrict: 'A', 
     scope : { 
      data : "=" 
     }, 
     link: function(scope, element, attrs) 
     { 

      var _pointOverEvents = 'pointOver'; 
      var _pointOutEvents = 'pointOut'; 


      var initialize = function() { 
       toggleListeners(true); 

      }; 

      var onPointOver = function(evt) { 


       if(scope.data) { 

        if(evt) { 
         //turn on grab visualization 
         scope.data.isGrabbable = true; 
        } 
         //turn on point visualization 
        scope.data.isPointed = true; 

       } 

      }; 

      var onPointOut = function(evt) { 

       if(scope.data) { 

        //turn off grab visualization 
        scope.data.isPointed = false; 
        scope.data.isGrabbable = false; 
       } 

      }; 

      var toggleListeners = function (enable) { 
       // remove listeners 

       if (!enable){ 
        console.log("simGrab destroyed"); 
        return; 
       } 
       // add listeners. 
       element.on(_pointOverEvents, onPointOver); 
       element.on(_pointOutEvents,onPointOut); 
       scope.$on('$destroy', onDestroy); 

      }; 

      var onDestroy = function (enable) { 
       toggleListeners(false); 
      }; 

      initialize(); 
     } 
    }; 
});

和HTML

<div class = "feed-box normal" ng-repeat="feed in normEntries" > 

<div class="feed-element normal" ng-class="'color'+($index+1)" ng-click="setCurrFeed(feed)" sim-grab data="feed"> 
    <div class="feed-title normal">{{feed.title}}</div> 
    <div class="time-ago">{{feed.date}}</div> 
    <p ng-bind-html="feed.summary"></p> 
</div> 

<div class="tip-container-centered" ng-show="feed.isPointed"> 
    <div class='open-bar'> 
     <div class='open-bar-text'>OPEN</div> 
     <div class='open-bar-bg'> 
      <span class="text">OPEN</span> 
      <span class='open-sphere'></span> 
     </div> 


    </div> 
</div> 

<div class="tip-container-bottom-right" ng-show="feed.isGrabbable"> 
    <div class="gesture grab" >GRAB</div> 
</div>

來源

2015-05-29 Jobin James

你可以創建一個問題plunkr？ –

重複多角綁定的問題是，對於每個結合觀察者存在。如果你需要很多綁定，頁面會很慢。如果您使用Angular 1.3+，則可以使用{{:: feed.title}}。「::」是one time binding，您應該儘可能減少觀察者的數量。如果您使用較低的角度版本，則可以使用https://github.com/tadeuszwojcik/angular-once。你應該總是綁定一些不會改變的東西。

您可以使用Chrome插件https://chrome.google.com/webstore/detail/angular-watchers/nlmjblobloedpmkmmckeehnbfalnjnjk來獲取當前觀察者的數量。

此外，您可以使用ng-repeat中的「track by」符號來減少。

例如，如果feed.title並沒有改變做這樣的事情：

<div class="feed-title normal">{{::feed.title}}</div>

來源

2015-05-29 14:30:18

我試過插件提到，並有56個觀察者報告的插件。我認爲這與其他一些以角度爲基礎的網站（例如搶劫者）中的555名觀察者相比並不多。不過，我嘗試使用範圍。$ apply（）並解決了問題。 –

如何使用隔離範圍提高角度指令中雙向綁定的性能？

回答

相關問題