一个directive=one额外的观察者？
一个directive=one额外的观察者？
提问于 2014-12-18 19:18:31
每个指令都有一个额外的观察者吗？下面是示例代码-- http://plnkr.co/edit/Mg4Z7PUUJI0dQRNfFZ8z?p=preview --它有4个带有一次性绑定的自定义指令，但是我有5个观察者，应该只有1。为什么？
angular.module("myApp", [])
.controller("initCtrl", function ($scope, $interval) {
$scope.dane = {
zm1: 'Directive 1 with onetime binding',
zm2: 'Directive 2 with onetime binding',
zm3: 'Directive 3 with onetime binding',
zm4: 'Directive 4 with onetime binding',
};
$interval(function () {
$scope.watchers = countWatchers();
}, 1000);
})
.directive("myDir", function () {
return {
scope: {
ngModel: "="
},
require: "ngModel",
link: function (scope, element, attrs, ctrl) {
},
template: "<div>{{::ngModel}}</div>"
}
})
;
/**
* Funkcja do zliczania watchers - max 2000
*/
(function () {
window.countWatchers = function () {
var root = angular.element(document.getElementsByTagName('body'));
var watchers = [];
var f = function (element) {
angular.forEach(['$scope', '$isolateScope'], function (scopeProperty) {
if (element.data() && element.data().hasOwnProperty(scopeProperty)) {
angular.forEach(element.data()[scopeProperty].$$watchers, function (watcher) {
watchers.push(watcher);
});
}
});
angular.forEach(element.children(), function (childElement) {
f(angular.element(childElement));
});
};
f(root);
// Remove duplicate watchers
var watchersWithoutDuplicates = [];
angular.forEach(watchers, function (item) {
if (watchersWithoutDuplicates.indexOf(item) < 0) {
watchersWithoutDuplicates.push(item);
}
});
return watchersWithoutDuplicates.length;
};
})();<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.3.6" data-semver="1.3.6" src="https://code.angularjs.org/1.3.6/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body data-ng-app="myApp">
<div ng-controller="initCtrl" class="container">
<div class="well">Watchers: {{watchers}}</div>
<my-dir ng-model="::dane.zm1"></my-dir>
<my-dir ng-model="::dane.zm2"></my-dir>
<my-dir ng-model="::dane.zm3"></my-dir>
<my-dir ng-model="::dane.zm4"></my-dir>
</div>
</body>
</html>
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-12-18 20:03:07
我想通了。使用ng模型指令(作为属性)添加额外的观察器。
结论:如果不需要双向绑定或一次真绑定，则不使用ng模型作为属性.
angular.module("myApp", [])
.controller("initCtrl", function ($scope, $interval) {
$scope.dane = {
zm1: 'Directive 1 with onetime binding',
zm2: 'Directive 2 with onetime binding',
zm3: 'Directive 3 with onetime binding',
zm4: 'Directive 4 with onetime binding'
};
$scope.change = function () {
$scope.dane.zm1 = "Changed";
};
$interval(function () {
$scope.watchers = countWatchers();
}, 1000);
})
.directive("myDir", function () {
return {
scope: {
ngModel: "="
},
require: "ngModel",
link: function (scope, element, attrs, ctrl) {
},
template: "<div>{{::ngModel}} - extra watcher due to ngModel</div>"
}
})
.directive("myDirNgModel", function () {
return {
scope: {
ngModel: "="
},
require: "ngModel",
link: function (scope, element, attrs, ctrl) {
},
template: "<div>{{ngModel}} - three extra watcher - ngModel, declaration, directive</div>"
}
})
.directive("ngBindOneWay", function () {
return {
scope: {
var: "@"
},
link: function (scope, element, attrs, ctrl) {
},
template: "<div>{{::var}} - no extra watchers</div>"
}
})
.directive("ngBindTwoWayOneTime", function () {
return {
scope: {
var: "="
},
link: function (scope, element, attrs, ctrl) {
},
template: "<div>{{::var}} - no extra watchers</div>"
}
})
.directive("ngBindTwoWay", function () {
return {
scope: {
var: "="
},
link: function (scope, element, attrs, ctrl) {
},
template: "<div>{{var}} - two extra watchers - declaration and directive</div>"
}
})
.directive("myDirNoBind", function () {
return {
scope: {},
link: function (scope, element, attrs) {
},
template: "<div>No bindings - no extra watchers</div>"
}
})
;
/**
* Funkcja do zliczania watchers - max 2000
*/
(function () {
window.countWatchers = function () {
var root = angular.element(document.getElementsByTagName('body'));
var watchers = [];
var f = function (element) {
angular.forEach(['$scope', '$isolateScope'], function (scopeProperty) {
if (element.data() && element.data().hasOwnProperty(scopeProperty)) {
angular.forEach(element.data()[scopeProperty].$$watchers, function (watcher) {
watchers.push(watcher);
});
}
});
angular.forEach(element.children(), function (childElement) {
f(angular.element(childElement));
});
};
f(root);
// Remove duplicate watchers
var watchersWithoutDuplicates = [];
angular.forEach(watchers, function (item) {
if (watchersWithoutDuplicates.indexOf(item) < 0) {
watchersWithoutDuplicates.push(item);
}
});
return watchersWithoutDuplicates.length;
};
})();<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.3.6" data-semver="1.3.6" src="https://code.angularjs.org/1.3.6/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body data-ng-app="myApp">
<div ng-controller="initCtrl" class="container">
<div class="well">Watchers: {{watchers}} - first watcher</div>
<my-dir ng-model="::dane.zm1"></my-dir>
<my-dir-ng-model ng-model="dane.zm1"></my-dir-ng-model>
<my-dir-no-bind></my-dir-no-bind>
<ng-bind-one-way var="{{::dane.zm1}}"></ng-bind-one-way>
<ng-bind-two-way var="dane.zm1"></ng-bind-two-way>
<ng-bind-two-way-one-time var="::dane.zm1"></ng-bind-two-way-one-time>
<div><a ng-click="change()" href="javascript:void(null)">Change zm1</a></div>
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27554078
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号