Angular 独立范围元素上的动画

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

当指令不在独立范围内时，动画效果很好。当我隔离范围时，添加 class 时动画不适用。使用 javascript 作为动画时，如何让动画在隔离范围内工作？

Answer 1

在隔离范围内 classes 需要与 $animate 服务一起应用。使用 jQlite 添加 class，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');
            };
        }
    }
}]);

Angular 独立范围元素上的动画

Angular animation on an isolated scope element

javascript

angularjs

angularjs-directive

angularjs-scope