隔离范围元素上的角度动画

Angular animation on an isolated scope element

本文关键字：动画范围元素隔离更新时间：2023-09-26

我有一个指令，它公开了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');
            };
        }
    }
}]);