我正在继续我的悲剧之旅，试图学习如何在AngularJS中编写好的指令……但是阅读了很多文章之后，我仍然有相同的问题。
这是我的测试指令：http://plnkr.co/edit/rjR8Q2TQi59TWSW0emmo?p=preview
的HTML：
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="myController">
<span my-directive caption="{{foo}}"></span>
<span my-directive caption="{{bar}}"></span>
</body>
</html>
js：
app = angular.module('app', []);
app.controller('myController', ['$scope', function ($scope) {
$scope.foo = "initial foo";
setTimeout(function() { // <-- simulate an async call or whatever...
console.log('after 3 sec in foo:');
$scope.foo = "changed foo";
}, 3000);
$scope.bar = "initial bar";
setTimeout(function() { // <-- simulate an async call or whatever...
console.log('after 3 sec in bar:');
$scope.bar = "changed bar";
}, 3000);
}]);
app.directive('myDirective', function() {
return {
restrict: 'A',
scope: {
caption: '@'
},
link: function(scope, element, attrs) {
attrs.$observe('caption', function(value) {
console.log(value);
})
}
}
});
我的问题是：
1）为什么延迟后没有获得更新标题值？
2）是否有更好的方法可以在不使用$ observe的情况下更新值？ （我在这里阅读：https://www.accelebrate.com/blog/effective-strategies-avoiding-watches-angularjs/，但是没有一个解释的方法看起来很干净，它们只是个hacky-workarounds）。
3）$ watch和$ observe之间有性能差异吗？ （哪个更好？我到处都读到了尽可能少地使用$ watch，对于$ observe来说也是一样）。
谢谢任何能让我清除所有这些东西的人！
最佳答案
和2.使用$timeout服务。 setTimeout不会将其所做的更改通知Angular。您必须在回调中手动触发$digest循环，而$timeout会为您处理。
有关更多信息，请参见this article。
通常，$watch和$observe在性能方面是相同的。它们表明可以改进您的代码。根据经验，每页上有2000位观察者时，浏览速度就会变慢。