AngularJS:暂停$消化和放大器;对隐藏DOM元素观察家 [英] AngularJS: Pause $digest & watchers on hidden DOM elements
问题描述
我们正在构建具有加载标签页多页的单页的应用程序。只有一个选项卡的内容在任何给定时间(很像一个浏览器)可见的,所以我们想暂时停下 $消化
和观察者距离的那些以DOM节点上执行隐藏的标签,直到用户切换到该选项卡。
We're building a single page application which has multiple pages loaded as tabs. Only the content of one tab is visible at any given time (much like a browser), so we want to temporarily pause $digest
and watchers from executing on those DOM nodes of the hidden tabs, until the user switches to that tab.
有没有办法做到这一点,使模型继续为背景选项卡进行更新,而是基于一个条件的视图更新。
Is there a way to achieve this, so that the model continues to be updated for the background tabs, but the view updates based on a condition.
以下code说明了这个问题:
The following code illustrates the problem:
<div ng-repeat="tab in tabs" ng-show="tab.id == current_tab.id">
<!-- tab content with bindings -->
</div>
的目标是优化
我已经意识到 Scalyr指令,但我想没有多余的功能更具体的解决方案包含在Scalyr。
I'm already aware of Scalyr directives, but I want a more specific solution without the extra features contained in Scalyr.
推荐答案
一些试验和错误我已经想通了下面的指令而暂停后,所有的儿童 $$观察家
如果在属性前pression计算结果为真正
,在假
它恢复的备份 $$观察家
After some trial and error I've figured out the following directive which pauses all the children's $$watchers
if the expression on the attribute evaluates to true
, on false
it restores any backed up $$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);
}
}
}
});
这篇关于AngularJS:暂停$消化和放大器;对隐藏DOM元素观察家的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!