Как увеличить производительность в двух направлениях привязки в угловой директиве с использованием изолированного объема?

Question

У меня есть директива «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> 

Answer 1

Проблема повторять много Угловые привязок в том, что для каждого связывания наблюдатель существует. Если вам нужно много привязок, страница будет медленной. Если вы используете Angular 1.3+, вы можете использовать {{:: feed.title}}. «::» - one time binding, вы должны использовать, где можно, чтобы уменьшить количество наблюдателей. Если вы используете более низкую угловую версию, вы можете использовать https://github.com/tadeuszwojcik/angular-once. Вы всегда должны связывать вещи, которые не будут меняться, один раз.

Вы можете использовать chrome Plugin https://chrome.google.com/webstore/detail/angular-watchers/nlmjblobloedpmkmmckeehnbfalnjnjk, чтобы получить счет текущих наблюдателей.

Также вы можете использовать нотацию «track by» в ng-repeat для уменьшения.

Например, если feed.title изменение не делает что-то вроде этого:

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