javascript - 如何使用隔离范围提高 Angular Directive(指令)中双向绑定(bind)的性能？

Question

我有一个指令“sim-grab”，它将为一组信息图 block 上的自定义事件“pointOver”和“pointOut”添加事件处理程序。当触发这些事件时，我需要在信息磁贴顶部显示可视化。

信息 block 是使用 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 绑定(bind)的问题是，对于每个绑定(bind)都存在一个观察者。如果绑定(bind)太多，页面会很慢。如果你使用 Angular 1.3+，你可以使用 {{::feed.title}}。 “::”是 one time binding ，您应该尽可能减少观察者的数量。如果您使用较低 Angular 版本，您可以使用 https://github.com/tadeuszwojcik/angular-once .您应该始终将不会更改的内容绑定(bind)一次。

您可以使用 chrome 插件 https://chrome.google.com/webstore/detail/angular-watchers/nlmjblobloedpmkmmckeehnbfalnjnjk获取当前观察者的数量。

您还可以在 ng-repeat 中使用“track by”符号来减少。

例如，如果 feed.title 没有改变，则执行如下操作:

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