angularjsディレクティブが呼び出されていません

Question

スコープ値の変更にアニメーションクラスを適用しようとしていますが、ディレクティブはここでは呼び出されません。

<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