Javascript 孤立范围元素上的角度动画

Javascript 孤立范围元素上的角度动画,javascript,angularjs,angularjs-directive,angularjs-scope,Javascript,Angularjs,Angularjs Directive,Angularjs Scope,我有一个向父作用域公开单个函数notify的指令。指令的其余部分需要保密 angular.module('my-module') .directive('notifier', function() { return { restrict: 'E', replace : true, template : '<div n-notify="notify">{{message}}</div&

我有一个向父作用域公开单个函数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制作动画时,如何使动画在隔离作用域内工作?

在隔离作用域中,需要使用$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');
            };
        }
    }
}]);