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

我有一个更改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
    };
});

这是正常的行为吗?

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

固定js为 here .

所以我改变了一个问题:如果另一个js改变了类,而不是ng类,我该怎么观察呢?

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

奇怪的是,虽然它是一个角模,但它使用class而不是ng class。因此,我没有找到从外部获取信息的方法,因为它只是作为“开放”类的外观出现。

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

作为解决方案,我复制了ui引导指令,并在其中添加了所需的内容。

谢谢