孤立的示波器元件上的角度動畫

Question

我有一個指令將單個函數notify公開給父範圍。指令的其餘部分需要保持私密。

angular.module('my-module') 
    .directive('notifier', function() { 
     return { 
      restrict: 'E', 
      replace : true, 
      template : '<div n-notify="notify">{{message}}</div>', 
      scope : { 
       message : '@', 
       nNotify : '=' 
      }, 
      link : function($scope, element, attrs) { 
       $scope.nNotify = function(message) 
       { 
        $scope.message = message; 
        element.addClass('notify-this'); 
       }; 
      } 
     } 
    }) 

    .animate('.notify-this', function() { 
     return { 
      addClass : function(el, class, done) { 
       // Code here 
      }, 
      removeClass : function(el, class, done) { 
       // Code here 
      } 
     } 
    }); 

當指令不在隔離範圍內時，動畫工作正常。當我隔離範圍時，動畫不適用於添加類時。在動畫中使用javascript時，如何獲得在隔離範圍內工作的動畫？

Answer 1

在隔離的範圍類中需要使用$animate服務。用jQlite，jQuery或vanilla JS添加一個類將不起作用。

.directive('notifier', ['$animate', function() { 
    return { 
     restrict: 'E', 
     replace : true, 
     template : '<div n-notify="notify">{{message}}</div>', 
     scope : { 
      message : '@', 
      nNotify : '=' 
     }, 
     link : function($scope, element, attrs) { 
      $scope.nNotify = function(message) 
      { 
       $scope.message = message; 
       $animate.addClass(el, 'notify-this'); 
      }; 
     } 
    } 
}]);