$观看到监控指令射击类变化1周期的晚期 [英] $watch to monitor change in class on directive firing 1 cycle late

问题描述

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

My goal is to do some action when a particular directive receives the class 'focused' through ng-class. But watching for changes on each of the directives seems to be doing weird things I don't understand. Here is the code first:

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

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

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

Initially the first test question is highlighted. When you click the second question I expect the console to log

文本试题1
为newValue未定义
属性oldValue重点
文本试题2
为newValue重点
属性oldValue未定义

然而控制台登录实际

文本试题1
为newValue重点
属性oldValue未定义

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

的其他的

在我点击第2个问题，如果我随后单击问题3控制台日志

After I click question 2, and if I subsequently click question 3 the console logs

文本试题1
为newValue
属性oldValue重点
文本试题2
为newValue重点
属性oldValue未定义

推荐答案

是正在变得晚了，有这个条件没有妥善的解决办法呢。但是你可以做下面的事情。

Yes is become late, there is no proper solution for this condition yet. However you can do something below.

    $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。$适用（）。

Because you are watching an async event which outside of AngularJS. Namely need to called at the end, to tell AngularJS that an asynchronous event just occurred by using $scope.$apply().

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

This like our custom $('button').on('click', ...) events which need to $scope.$apply(). However you may ask that, I am watching changes done by using ng-class. This is rigth, but your watcher function is called before ng-class done its work. Namely you aren't watching "ng-class" you are watching class attribute. For this reason the changes you are listen will noticed to angular in the next diggest.

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

If you tried to access current class in your watcher, you will get old value, because ng-class hasn't done its work yet.

如果您试图访问当前类的JavaScript 的setTimeout 功能在你在你的守望者，你会得到正确的vallue，因为的setTimeout 将被称为毕竟角作品完成

If you tried to access current class javascript setTimeout function in your in your watcher, you will get the correct vallue, because setTimeout would be called after all angular works done.

这情况下是有效的AngularJS以外的所有变化。当你试图观看一个元素heigth，宽度，颜色，对象属性等，您可以在安静中使用它。

This case is valid for all changes outside of AngularJS. When you tried to watch an element heigth, width, color, an object property etc. You can use it in quietness.

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

NOTE Think watching changes outside of AngularJS like a promise and setTimeout would be your callback.

这篇关于$观看到监控指令射击类变化1周期的晚期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！