Question

我正在编写一个将添加到按钮的指令。使用该指令，单击按钮将导致按钮从DOM中删除，并被另一个实际调用该操作的按钮替换。这提供了验证步骤。

目前，我无法让$ animate.enter（）显示第二个按钮。第一个按钮消失，但第二个按钮不会出现。

相关代码如下：

HTML

<label verify class="btn btn-default wide" data-click="resetFilters()">Clear Filters</label>

角

angular.module("App").directive "verify", ["$compile", "$animate",
  ($compile, $animate) ->

    directive = {}

    # This directive should be an attribute
    directive.restrict = "A"

    # We do not want to replace any HTML
    directive.replace = false

    # Skip the compilation of other directives
    directive.terminal = true

    # Compile this directive first
    directive.priority = 1001

    directive.link = (scope, element, attrs) ->

      # Save parent element
      parent = element.parent()

      # Remove verify attribute to prevent infinite compile loop
      element.removeAttr "verify"
      element.removeAttr "data-verify"

      # Select the element under the "verify" div, store the "click"
      # function and remove it from the element
      clickAction = if element.attr "click" then element.attr "click" else element.attr "data-click"
      element.removeAttr "click"
      element.removeAttr "data-click"

      # Create a new element from the first one. This will become the
      # verify button
      second = element.clone()

      # Design the verify button
      second.html "<span class=\"glyphicon glyphicon-ok\"</span>"
      second.addClass "btn-danger"

      # When the user clicks on the original button, hide it and show
      # the verify button
      element.bind "click", ->
        $animate.leave element, ->
          $animate.enter second, parent, -> console.log "done"

      # When the user clicks the "verify" button evaluate the
      # specified "click" action, hide the verify button, and show the
      # original button
      second.bind "click", ->
        scope.$eval clickAction
        $animate.leave second, ->
          $animate.enter element, parent, -> console.log "done"

      # Compile the element
      $compile(element)(scope)

    return directive

]

Answer 1

不确定是否有，但首先需要引用angular-animate.js并将其添加为依赖模块：

var app = angular.module('myApp', ['ngAnimate']);

然后将动画类添加到元素：

<label verify class="btn btn-default wide animation" ...

简单的CSS示例：

.animation {
  transition: all 150ms ease-out;
}
.animation.ng-enter,
.animation.ng-leave.ng-leave-active {
  opacity: 0;
}
.animation.ng-enter.ng-enter-active,
.animation.ng-leave {
  opacity: 1;
}

由于bind()是一个jqLite / jQuery函数，你需要在调用$apply()时包装代码以手动触发摘要循环，然后在第一个回调中再调用一次：

element.bind('click', function() {
  scope.$apply(function() {
    $animate.leave(element, function() {
      scope.$apply(function() {
        $animate.enter(second, parent, null, function() {
          console.log('Done.');
        });
      });
    });
  });
});

另请注意，回调函数应作为第四个参数传递给$animate.enter，而不是第三个。

如果你要走这条路线，你还需要手动重新点击点击功能。

示例：

...

second.html("<span class=\"glyphicon glyphicon-ok\"></span>");
second.addClass("btn-danger");

var bindElement = function(el) {
  el.bind('click', function() {
    scope.$apply(function() {
      $animate.leave(element, function() {
        scope.$apply(function() {
          $animate.enter(second, parent, null, function() {
            bindSecond(second);
          });
        });
      });
    });
  });
};

var bindSecond = function(el) {
  el.bind('click', function() {
    scope.$apply(function() {
      scope.$eval(clickAction);
      $animate.leave(second, function() {
        scope.$apply(function() {
          $animate.enter(element, parent, null, function() {
            bindElement(element);
          });
        });
      });
    });
  });
};

bindElement(element);

$compile(element)(scope);

演示： http://plnkr.co/edit/tlDir9qAtd6ePngtvlco?p=preview

AngularJS 1.2.26 $ animate.enter（...）无效

1 个答案: