격리 된 범위 요소의 각진 애니메이션

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

지시문이 격리 된 범위에 있지 않으면 애니메이션이 제대로 작동합니다. 범위를 분리하면 클래스가 추가 될 때 애니메이션이 적용되지 않습니다. 애니메이션을 위해 자바 스크립트를 사용할 때 분리 된 범위 안에서 애니메이션을 작동 시키려면 어떻게합니까?

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