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

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

1 个答案: