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

Question

为什么这不起作用？ $animate.leave 不知道要 '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();
  });
};

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

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

Angular provider - $animate is not working properly

provider

angularjs

jquery-animate

更新