Angular 提供程序 - $animate 无法正常工作

Question

为什么这不起作用？ $animate.leave 不知道要“离开”什么，导致我的新元素出现多个实例。为什么会这样？

ng-notify.js

angular.module('ngNotify', [])
    .provider('ngNotify', function () {

        this.$get = ['$injector', '$document', '$rootScope', function ($injector, $document, $rootScope) {

            this.show = function(){

                var $animate;

                if (!$animate) {
                    $animate = $injector.get('$animate');
                 }

                var bodyElement = angular.element(document.querySelector('body'))
                var redBlockElement = angular.element('<div class="red block"></div>')

                // close previous instances
                $animate.leave(redBlockElement);

                $animate.enter(redBlockElement, bodyElement).then(function() {                  
                    $rootScope.$apply();
                });

            }
            return this;
        }];

});

我将此代码作为单独的 JS 加载到我的主应用程序中。这就是我的app.js 文件的样子

var myApp = angular.module('myApp ',[
    'ui.router',
    'ngAnimate',
    'LocalStorageModule',
    'angularMoment',
    'angular-loading-bar',
    'angular.morris-chart',
    'mgo-angular-wizard',
    'myApp.version',
    'ngNotify', // the dependency I'm trying to create
])

**

更新

**

我把变量放在show() 之外，重复的问题就解决了。但是我怎样才能让我的消息动态呢？

'use strict';

angular.module('ngNotify', [])
.provider('ngNotify', function () {

    this.$get = ['$injector', '$document', '$timeout', '$rootScope', '$animate', function ($injector, $document, $timeout, $rootScope, $animate) {

        var html = '<div class="ng-notify">' + text + '</div>'; // text has to be dynamic

        var tmpl = angular.element(html);
        var body = $document.find('body').eq(0);
        var bodyElement = angular.element(document.querySelector('body'));

        this.show = function(text){
            $animate.enter(tmpl, body);
        }

        return this;
    }];

});

Answer 1

问题是每次调用show，下面的代码都会创建一个新元素：

var redBlockElement = angular.element('<div class="red block"></div>')

这个元素还没有附加到 DOM，所以将它传递给 $animate.leave 不会有任何效果，因为没有什么可以删除。

然后将元素传递给$animate.enter 并附加到DOM。

所以每次调用show，都会创建并添加一个新元素。

一种解决方案是移动以下行，以便它们只被调用一次：

var bodyElement = angular.element(document.querySelector('body'));
var redBlockElement = angular.element('<div class="red block">Test</div>');

this.show = function() { ...

然后始终使用 redBlockElement 引用，将其传递给 leave、enter 或更改其文本值。

如果您希望它们每次都是不同的元素，您可以保留对先前创建的元素的引用并在创建和添加新元素之前将其删除，或者只需查询 DOM 并将其删除：

var bodyElement = angular.element(document.querySelector('body'));

this.show = function() {

  var existing = angular.element(bodyElement[0].querySelector('.red.block'));

  $animate.leave(existing);

  var redBlockElement = angular.element('<div class="red block"></div>');

  $animate.enter(redBlockElement, bodyElement).then(function() {
    $rootScope.$apply();
  });
};

请注意，此示例仅删除一个现有元素，即使有多个。