在AngularJS指令中观察DOM状态

Question

我有两个与指令相关的问题，这些指令依赖于其他指令设置的DOM状态。

在第一个例子中，我想根据另一个类的存在来设置一个类（将Bootstrap样式应用于输入）。

演示：http://codepen.io/tamlyn/pen/jPNWQR

摘录指令：

  scope.$watch(function(){
    return el.hasClass('ng-invalid');
  }, function(isInvalid) {
    el.toggleClass('also-invalid', isInvalid);
  })

问题是also-valid类是一个消化循环。最初它应该设置时取消设置，然后在框中键入一个字符设置应该取消设置的类，然后进一步的字符再次取消设置。这可能是由于触发手表的顺序以及DOM更改不会触发进一步迭代的事实。它似乎不受指令priority的影响。

在第二个例子中，我想根据元素的宽度设置一个类。

演示：http://codepen.io/tamlyn/pen/BNBjbq

摘录指令：

  scope.$watch(function(){
    return el[0].clientWidth;
  }, function(width) {
    el.toggleClass('wide', width > 300);
  })

问题是一样的：这个类是一个迭代。

我做错了什么，我应该怎么做？