Question

我有一个UI.Bootstrap drowndown：

<li class="dropdown hello" id="contentMenu" watch-content>
          <a class="dropdown-toggle" >
            Content options
          </a>
          <ul class="dropdown-menu" >
            <li ng-repeat="option in options">
              <a><input type="checkbox" checklist-model="contentChoices"  checklist-value="option.id" ng-click="$event.stopPropagation()"> {{option.slug}} </a>
            </li>
          </ul>
        </li>

点击此按钮后，会向open

添加li.dropdown.hello类

我正在尝试注意添加课程open但是它无效。

.directive('watchContent', function ($window) {
return {
    restrict: 'A',
    link: function (scope, elem, attrs) {

    //     console.log(attrs.class)


        // attrs.$observe("class", function(value){
        //     console.log('change !');
        //     if(value.indexOf("open") > -1){
        //         alert("yes")
        //     }
        // })
    //     scope.$watch(function() {return attrs.class; }, function(newValue, oldValue, scope){
    //         console.log('change !');
    //         console.log(newValue)
    //         console.log(oldValue)
    //         console.log(scope)
    //         console.log(attrs.class)
    //         // debugger;
    //         if (elem.hasClass('open')) {
    //           console.log('YEs')
    //         } else {
    //           console.log('no')
    //         }
    //     });
      scope.$watch(function () {
          return elem[0].className;
      }, function (newValue, oldValue) {
          if (newValue === oldValue) { return; }
          alert(newValue);
      });
      scope.$apply()
    }
};
})

Answer 1

如果没有深入了解原因，attrs无法按预期处理class属性。

您可以改为观看元素className：

scope.$watch(function () {
    return elem[0].className;
}, function (newValue, oldValue) {
    if (newValue === oldValue) { return; }
    alert(newValue);
});

另请参阅此 short demo 。

$ observe元素的类名

1 个答案: