javascript - 指令 : $observe, 类属性更改仅捕获一次

Question

我有一个更改 div 样式的指令，并且希望在每次元素的类更改时收到 $observe 的通知。问题是它发生在指令创建时而不是之后。这是代码和 fiddle

<div ng-app="testObserve">
    <div ng-controller="Ctrl2"> 
        <span class="rouge" ng-click="toggleClass()" my-test>Coucou</span>
    </div>
</div>

angular.module('testObserve', [])
    .controller('Ctrl2', function ($scope) {})
    .directive('myTest', function () {

    function link(scope, element, attrs) {

        scope.toggleClass = function () {
            if (element.hasClass('rouge')) {
                element.removeClass('rouge');
            } else {
                element.addClass('rouge');
            }
            console.log( 'I become ' + element[0].outerHTML );
        };

        attrs.$observe('class', function (val) {
            console.log('class has changed' + val);
            debugger;
        });
    }

    return {
        link: link
    };
});

这是正常行为吗？

---

好的，我发现，在 html 和 js 代码中它必须是 ng-class 而不是 class(它在文档中)。

固定的js是here .

所以我稍微改变一下问题:如果另一个 js 改变了类，但不是 ng-class，我怎么观察？

---

要回答@koolunix 的问题(是的，unix 是 kool :))关于 js 是否在 Angular 范围内，实际上我想使用 Angular 引导下拉菜单并在下拉菜单打开或关闭时触发一些东西。

奇怪的是，虽然是angular模块，但是使用的是class，而不是ng-class。所以我没有找到从外部捕获该信息的方法，因为它仅作为“公开”类(class)的外观出现。

我认为提交的答案有效，但我仍然需要尝试。

作为解决方法，我复制了 ui-bootstrap 指令并在其中添加了我需要的内容。

谢谢!

Answer 1

$observe用于观察包含插值的属性的值变化。

例如:

<span class="{{something}}">Hello</span>

在您的示例中，您可以使用 $watch而是像这样观察类属性的变化:

scope.$watch(function() {
  return element.attr('class');
}, function(newValue, oldValue) {
  if (newValue !== oldValue) { // Values will be equal on initialization
    console.log('class has changed to: ' + newValue);
  }
});

工作示例:http://plnkr.co/edit/SImhYTkN11eAECC8gDXm?p=preview