Angular数据绑定机制
关键词:$watch,$digest,$apply,dirty-checking 1.Angular.js扩展浏览器的事件循环浏览器持续等待例如用户交互这样的事件。当你在一个 2.$watch list
app.controller('MainCtrl',function($scope) { $scope.people = [...]; // 假设长度为10 });
<ul> <li ng-repeat="person in people"> {{person.name}} - {{person.age}} </li> </ul> 其中 3.$digest 循环当浏览器接收到angular context相关的事件时, 脏检查超过10次后会抛出异常防止无限循环。 4.通过$apply 进入 angular context
app.directive('clickable',function() { return { restrict: "E",scope: { count1: '=',count2: '=' },template: '<ul style="background-color: lightblue"><li>{{count1}}</li><li>{{count2}}</li></ul>',link: function(scope,element,attrs) { element.bind('click',function() { scope.count1++; scope.count2++; }); } } }); app.controller('MainCtrl',function($scope) { $scope.count1= 0; $scope.count2= 0; }); 例子中,每次点击该元素,预期count1和count2都会自增1,但实际没有。其实 element.bind('click',function() { scope.$apply(function() { scope.foo++; scope.bar++; }); }) 经过调用 5.总结angular事件绑定机制如下图:
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |