数据绑定如何在AngularJS框架中工作？
我没有在他们的网站上找到技术细节.当数据从视图传播到模型时,它或多或少清楚它是如何工作的.但是AngularJS如何在没有setter和getter的情况下跟踪模型属性的变化？
我发现有一些JavaScript观察者可以做这项工作.但Internet Explorer 6和Internet Explorer 7不支持它们.那么AngularJS如何知道我改变了例如以下内容并在视图上反映了这一变化？
myobject.myproperty="new value";
我对角度很新,但我觉得这有点疯狂.
我在一个控制器范围内通过ng-repeat显示了多个集合.每个列表都有一个输入字段来执行简单查询.我在我的代码中使用各种过滤器,最后在我的过滤器函数中放入了console.log.我意识到每次为一个列表调用我的过滤器函数时,都会调用该范围内的所有列表.此外,它每次调用过滤器功能两次.因此,使用3个集合,过滤其中一个列表将调用过滤器函数6次.
我想也许这只是我的自定义过滤器,所以我尝试了默认的过滤功能.相同的故事.这是我的代码:
https://dl.dropbox.com/u/905197/angular-filter-test.html
转到控制台,亲眼看看:/
我在这做错了什么？这看起来很简单,但它做了很多工作.
在以下示例中:
的test.html
<!DOCTYPE html>
<html ng-app ng-controller="AppController">
<head>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="script1.js"></script>
</head>
<body>
<div ng-include="'test1.html'"></div>
{{testFn()}}
</body>
</html>
test1.html
<div>{{testFn()}}</div>
script1.js
function AppController($scope) {
$scope.testFn = function() {
console.log("TestFn");
return "test";
}
}
发生fn testFn执行4次.我希望在控制台中只看到2个日志.甚至,如果我删除
<div ng-include="'test1.html'"></div>
有2个日志,而不仅仅是一个.我错了什么？
更新:
angular.js
// added console.log to original code
var ngBindDirective = ngDirective(function(scope, element, attr) {
console.log("ngDirective", attr.ngBind);
element.addClass('ng-binding').data('$binding', attr.ngBind);
scope.$watch(attr.ngBind, function ngBindWatchAction(value) {
console.log("ngDirective - scope.$watch", value);
element.text(value == undefined ? '' : value);
});
});
的test.html
<!DOCTYPE html> …