angularjs 指令未被调用

Question

我正在尝试对范围值更改应用动画 class，但指令从未在此处被调用。

    <md-card animateOnChange="currentCard.fab_id">
    <md-card-header-text>
      <span class="md-subhead">Id: {{currentCard.fab_id}} </span>
    </md-card-header-text>
  </md-card-header>
</md-card>

指令：

.directive('animateOnChange', function($timeout) {
   return function(scope, element, attr) {
        scope.$watch(attr.animateOnChange, function(nv,ov) {
            if (nv!=ov) {
                element.addClass('animated shake changed');
                $timeout(function() {
                    element.removeClass('animated shake changed');
                }, 1000);
            }
        });
    }
  })

Answer 1

尝试：

<md-card animate-on-change="currentCard.fab_id">

和：

scope.$watch(attr.animateOnChange, function(nv,ov) {...}

因为angularjs规范化指令和属性。参见 https://docs.angularjs.org/guide/directive

angularjs 指令未被调用

angularjs directive is not called

angularjs

animate.css