$观看到监控指令射击类变化1个周期的后期($watch to monitor change in c

我的目标是当一个特定的指令接收类“重点”，通过纳克级的做一些动作。但是，看到了在每个指令的变化似乎是在做奇怪的事情我不明白。下面是代码第一：

http://plnkr.co/edit/6Te8O2mlBI058DpwGF7f?p=preview

的index.html

   <test-question
      ng-class="{'focused': tracer.focus == 1}"
      focusnum = "{{n}}"
      ng-click="tracer.focus = 1"
      >
      Test Question 1
    </test-question>
    <test-question
      ng-class="{'focused': tracer.focus == 2}"
      focusnum = "{{n}}"
      ng-click="tracer.focus = 2"
      >
      Test Question 2
    </test-question>
    <test-question
      ng-class="{'focused': tracer.focus == 3}"
      focusnum = "{{n}}"
      ng-click="tracer.focus = 3"
      >
      Test Question 3
    </test-question>

的script.js

angular.module('sampleApp', [])
  .controller("SampleController", function($scope) {
    $scope.tracer = {
        focus: 1
    }
  })
  .directive('testQuestion', function() {
    return {
        restrict: 'E',
        link: function($scope, el, attrs) {
          $scope.$watch(function() {
                  return el.attr('class');
              }, function(newValue, oldValue) {
                  // do something here when directive gets class focused
                  console.log("text", el.text());
                  console.log("newValue", newValue);
                  console.log("oldValue", oldValue);
            });
        }
    }
  });

最初，第一测试问题被突出显示。当您单击第二个问题，我希望控制台登录

"text" Test Question 1 "newValue" undefined "oldValue" focused "text" Test Question 2 "newValue" focused "oldValue" undefined

然而，实际上控制台登录

"text" Test Question 1 "newValue" focused "oldValue" undefined

其结果是，这种怪异的行为我不能准确地当指令接收集中的类检测。 它看起来好像手表是一个周期的后期。 这将是巨大的，如果一个老乡朋友可以帮助我了解为什么发生这种情况。 谢谢！

额外

之后我点击的问题2，如果我随后单击问题3控制台日志

"text" Test Question 1 "newValue" "oldValue" focused "text" Test Question 2 "newValue" focused "oldValue" undefined

Yes（是）成为后期，有这个条件没有妥善的解决办法呢。但是你可以做下面的事情。

    $scope.$watch(function() {
              return el.hasClass('focused');
          }, function(newValue, oldValue) {
              // now you should use javascript setTimeout for check after $diggest
              var myOldValue = newValue; //this mean newValue realy oldValue yet.
               setTimeout(function(){
                 var myNewValue= el.hasClass('focused');
                  console.log(myNewValue, myOldValue)
                  //do staff here
               },0)
              //note that, don't use angular $timeout it may couse recursive stack
        });

为什么？

因为你正在看一个异步事件，AngularJS之外。即需要叫在年底，告诉异步事件只是使用$范围发生AngularJS。$适用（）。

这就像我们的自定义$（ '按钮'）。在（ '点击'，...），这需要$范围事件。$适用（）。 然而，你可能会问，我看用纳克级所作的更改。这是分辩，但纳克级的完成了它的工作之前，你的守望者函数被调用。即你不是在看“ 纳克级 ”你正在看类属性。出于这个原因，你正在听的变化会发现到的角度，在未来diggest。

如果您尝试访问您的守望者当前类，你会得到旧的价值，因为纳克级还没有做的工作呢。

如果您尝试访问当前类的javascript setTimeout函数在你在你的守望者，你会得到正确的vallue，因为setTimeout的会做所有的角度作品后调用。

这种情况适用于AngularJS以外的所有变化。当你想观看的元素heigth，宽度，颜色，对象属性等，您可以在安静中使用它。

注：想想看像一个承诺和setTimeout的将是你的回调AngularJS之外的变化。