指令:$observe，类属性更改仅捕获一次 [英] Directive : $observe, class attribute change caught only once

问题描述

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

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

angular.module('testObserve', []).controller('Ctrl2', function ($scope) {}).directive('myTest', function () {功能链接(范围，元素，属性){scope.toggleClass = 函数 () {如果 (element.hasClass('胭脂')) {element.removeClass('胭脂');} 别的 {element.addClass('胭脂');}console.log('我变成了' + element[0].outerHTML);};attrs.$observe('class', function (val) {console.log('类已更改' + val);调试器；});}返回 {链接:链接};});

这是正常行为吗?

<小时>

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

固定的js是这里.

所以我稍微改变一下问题:如果另一个 js 更改了类，而不是 ng-class，我该如何观察?

<小时>

要回答@koolunix 的问题(是的，unix 是 kool :))关于 js 是否在 angular 范围内，实际上我想使用 angular bootsrap 下拉菜单并在下拉菜单打开或关闭时触发某些内容.

奇怪的是，虽然它是一个angular模块，但它使用的是class而不是ng-class.因此，我没有找到从外部捕获该信息的方法，因为它仅显示为开放"类的外观.

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

为了解决这个问题，我复制了 ui-bootstrap 指令并在里面添加了我需要的东西.

谢谢！

解决方案

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

例如:

<span class="{{something}}">你好</span>

在您的示例中，您可以使用 $watch 来监视像这样的类属性:

scope.$watch(function() {return element.attr('class');}，函数(新值，旧值){if (newValue !== oldValue) {//初始化时值相等console.log('类已更改为:' + newValue);}});

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

I have a directive changing the style of a div and would like to be notified by $observe each time the class of the element changes. The problem is that it happens at directive creation but not after. Here is the code and a 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
    };
});

Is this normal behavior?

---

Ok I found, it has to be ng-class instead of class both in the html and the js code (it is in the documentation).

The fixed js is here.

So I change a bit the question : if another js changes the class, but not ng-class, how may I observe that ?

---

To answer to @koolunix's question (and yes unix is kool :) ) about if js is in the angular scope, actually I want to use angular bootsrap dropdown and trigger something when the drop down opens or closes.

Strangely, although it is an angular module, it uses class instead of ng-class. So I did not find a way to catch that information from the outside as it only appears as the appearance of the 'open' class.

I think the submitted answer works, but I still need to try.

As a work around I duplicated the ui-bootstrap directive and added what I needed inside.

Thanks!

解决方案

$observe is used to observe the value changes of attributes that contain interpolation.

For example:

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

In your example you can use $watch instead to watch for changes on the class attribute like this:

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

Working example: http://plnkr.co/edit/SImhYTkN11eAECC8gDXm?p=preview

这篇关于指令:$observe，类属性更改仅捕获一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！