AngularJS:在隐藏的 DOM 元素上暂停 $digest 和观察者

Question

我们正在构建一个单页面应用程序，其中多个页面作为选项卡加载。在任何给定时间只有一个选项卡的内容是可见的(很像浏览器)，因此我们希望暂时暂停 $digest 和观察者在隐藏选项卡的 DOM 节点上执行，直到用户切换到该选项卡。

有没有办法实现这一点，以便后台选项卡的模型继续更新，但 View 根据条件更新。

下面的代码说明了这个问题:

<div ng-repeat="tab in tabs" ng-show="tab.id == current_tab.id">
    <!-- tab content with bindings -->
</div>

目标是优化。

我已经知道 Scalyr directives ，但我想要一个更具体的解决方案，而不需要 Scalyr 中包含的额外功能。

Answer 1

经过一番试验和错误，我发现了以下指令，如果属性上的表达式计算结果为 true，则在 false 它会恢复任何备份的$$watchers

app.directive('pauseChildrenWatchersIf', function(){
    return {
        link: function (scope, element, attrs) {

            scope.$watch(attrs.pauseChildrenWatchersIf, function (newVal) {
                if (newVal === undefined) {
                    return;
                }
                if (newVal) {
                    toggleChildrenWatchers(element, true)
                } else {
                    toggleChildrenWatchers(element, false)
                }
            });
            function toggleChildrenWatchers(element, pause) {
                angular.forEach(element.children(), function (childElement) {
                    toggleAllWatchers(angular.element(childElement), pause);
                });
            }

            function toggleAllWatchers(element, pause) {
                var data = element.data();
                if (data.hasOwnProperty('$scope') && data.$scope.hasOwnProperty('$$watchers') && data.$scope.$$watchers) {
                    if (pause) {
                        data._bk_$$watchers = [];
                        $.each(data.$scope.$$watchers, function (i, watcher) {
                            data._bk_$$watchers.push($.extend(true, {}, watcher))
                        });

                        data.$scope.$$watchers = [];
                    } else {
                        if (data.hasOwnProperty('_bk_$$watchers')) {
                            $.each(data._bk_$$watchers, function (i, watcher) {
                                data.$scope.$$watchers.push($.extend(true, {}, watcher))
                            });
                        }
                    }

                }
                toggleChildrenWatchers(element, pause);
            }
        }
    }
});