出于性能目的,我想从我的ng-repeat中删除双重数据绑定(因此,关联的观察者).
它加载30个项目,这些数据一旦加载就是静态的,因此不需要双重数据绑定.
让我们说：
<div ng-repeat='stuff in stuffs'> // nothing in here </div>
观察者数量为211(该页面上还有其他绑定,不仅仅是ng-repeat)
<div ng-repeat='stuff in ::stuffs'> // nothing in here </div>
观察者数量仍然是211(如果我理解它应该是210),但是等待：
<div ng-repeat='stuff in ::stuffs'>
{{stuff.id}}
</div>
观察者数量现在是241(好的,211个观察者30个东西* 1个观察者= 241个观察者)
<div ng-repeat='stuff in ::stuffs'>
{{::stuff.id}}
</div>
看守人数仍然是241！是::不应该删除相关的观察者？
<div ng-repeat='stuff in ::stuffs'>
{{stuff.id}} {{stuff.name}} {{stuff.desc}}
</div>
还是241 ……
这些例子确实是在我的应用程序中做出的,所以这些数字也是真实的.
实际的ng-repeat比这里的例子复杂得多,我在页面上达到了约1500名观察者.如果我删除它的内容(如例子中),我会下降到约200名观察者.那么我该如何优化呢？为什么::似乎不起作用？
谢谢你赐教……
解决方法
在你的特定情况下很难弄清楚确切的问题是什么,也许提供一个孤立的例子是有意义的,这样其他人就可以提供帮助.
结果可能取决于您如何计算观察者.我从here开始采取解决方案.
这是a Plunker example按预期工作(添加或删除::在ng-repeat中)：
HTML
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js@1.5.6" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="mainCtrl">
<div>{{name}}</div>
<ul>
<li ng-repeat="item in ::items">{{::item.id}} - {{::item.name}}</li>
</ul>
<button id="watchersCountBtn">Show watchers count</button>
<div id="watchersCountLog"></div>
</body>
</html>
JavaScript的
angular
.module('app',[])
.controller('mainCtrl',function($scope) {
$scope.name = 'Hello World';
$scope.items = [
{ id: 1,name: 'product 1' },{ id: 2,name: 'product 2' },{ id: 3,name: 'product 3' },{ id: 4,name: 'product 4' },{ id: 5,name: 'product 5' },{ id: 6,name: 'product 6' },{ id: 7,name: 'product 7' },{ id: 8,name: 'product 8' },{ id: 9,name: 'product 9' },{ id: 10,name: 'product 10' }
];
});
function getWatchers(root) {
root = angular.element(root || document.documentElement);
var watcherCount = 0;
function getElemWatchers(element) {
var isolateWatchers = getWatchersFromScope(element.data().$isolateScope);
var scopeWatchers = getWatchersFromScope(element.data().$scope);
var watchers = scopeWatchers.concat(isolateWatchers);
angular.forEach(element.children(),function (childElement) {
watchers = watchers.concat(getElemWatchers(angular.element(childElement)));
});
return watchers;
}
function getWatchersFromScope(scope) {
if (scope) {
return scope.$$watchers || [];
} else {
return [];
}
}
return getElemWatchers(root);
}
window.onload = function() {
var btn = document.getElementById('watchersCountBtn');
var log = document.getElementById('watchersCountLog');
window.addEventListener('click',function() {
log.innerText = getWatchers().length;
});
};
希望这可以帮助.
