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是否在角度范围内，实际上我想使用角度bootsrap下拉并在下拉打开或关闭时触发某些内容。

奇怪的是，虽然它是一个角度模块，但它使用的是类而不是ng-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

指令：$ observe，类属性更改只捕获一次

1 个答案: