在AngularJS中隔离范围指令和$ observer

Question

I'm continuing my tragedy-journey trying to learn how to write good directives in AngularJS... but after reading many articles around I just have the same questions and problems. 我正在继续我的悲剧之旅，尝试学习如何在AngularJS中编写好的指令……但是阅读了很多文章之后，我仍然有相同的问题。 Here is my test directive: http://plnkr.co/edit/rjR8Q2TQi59TWSW0emmo?p=preview 这是我的测试指令： http : //plnkr.co/edit/rjR8Q2TQi59TWSW0emmo?p=preview

html: 的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: 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);
            })
        }
    }
});

My questions are: 我的问题是：

1) Why it doesn't get the update caption value after the delay? 1）为什么延迟后没有获得更新标题值？

2) Is there a better way to get the values updated without using $observe? 2）是否有更好的方法可以在不使用$ observe的情况下更新值？ (I read here: https://www.accelebrate.com/blog/effective-strategies-avoiding-watches-angularjs/ but none of the explained methods seems clean they just seems hacky-workarounds). （我在这里阅读： https : //www.accelebrate.com/blog/effective-strategies-avoiding-watches-angularjs/，但是没有一种解释的方法看起来很干净，它们似乎是很棘手的解决方法）。

3) Is there any performance difference between $watch and $observe? 3）$ watch和$ observe之间有性能差异吗？ (which is better? I've read everywhere to use $watch as less as I can, is the same for $observe). （哪个更好？我到处都读到了尽可能少地使用$ watch，对于$ observe来说也是一样）。

Thank you to anyone that will make me clear all these stuff! 谢谢任何能让我清除所有这些东西的人！

Answer 1

and 2. Use the $timeout service. 2.使用$timeout服务。 setTimeout does not inform Angular about the changes it makes. setTimeout不会将其所做的更改通知Angular。 You'd have to manually trigger a $digest cycle in the callback, which $timeout handles for you. 您必须在回调中手动触发$digest循环，而$timeout为您处理。

For more info, see this article . 有关更多信息，请参见本文。

In general, $watch and $observe are the same, performance-wise. 通常，在性能方面， $watch和$observe是相同的。 They are an indication that your code can be improved. 它们表明您的代码可以改进。 As a rule of thumb, once you get around 2000 watchers on a page, it tends to get sluggish. 根据经验，每页上有2000位观察者时，浏览速度就会变慢。

在AngularJS中隔离范围指令和$ observer

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-12-13 00:11:19

在AngularJS中隔离范围指令和$ observer

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-12-13 00:11:19

解决方案1
2 已采纳 2015-12-13 00:11:19