我正在尝试创建一个“时钟”指令作为学习Angular的方法.我怎样才能确保它“嘀嗒”？
这是我尝试过的fiddle Link：
angular.module('app')
.directive('clock',function(){
return {
restrict: 'E',template: '<div>{{date}}</div>',link: function(scope,elem,attr){
scope.date = getDate();
setInterval(function(){
scope.date = getDate();
},100);
}
}
})
使用setInterval来更新范围变量不起作用.我假设因为该指令不再注意它是否会发生变化？
解决方法
它正在更新范围变量,但Angular并不知道更改.
建议使用Angular $interval.
这是你的$interval：https://jsfiddle.net/oafcde6g/11/的小提琴
换句话说,Angular没有通过“监听”范围属性来做任何魔术,它只是进行脏检查.但要做到这一点,需要通知事情发生了变化.因此,如果你真的想使用setInterval而不是$interval,你可以手动通知它发生了一些变化：
setInterval(function () {
scope.$apply(function () {
scope.date = getDate();
});
});
这样,您通知它在$apply中运行您的匿名函数,然后消化范围,检查是否有任何更改.如果是,它将更新视图.
ng- *事件的“魔力”(ng-click,ng-model等)
即使看起来像angular会自动知道在使用它的内置指令单击/更改某些内容时重新呈现视图,但事实并非如此.
ng-click的一些简单实现看起来像：
angular.module('app')
.directive('ngClick',function(){
return {
restrict: 'A',attr){
elem.on('click',function () {
scope.$apply(function () {
scope.$eval(attr.ngClick);
});
});
}
}
})
如果您尝试在角度上下文之外正常绑定click事件并使其更改范围变量,则可以自己查看.在您明确告知之前它不会更新(就像我们在setInterval示例中所做的那样).
