angularjs - 我如何创建一个 AngularJS 指令来为数据更改的元素设置动画？

Question

在我正在构建的应用程序中，我在屏幕上显示了一个标题。它绑定(bind)到我范围内的一个属性。我正在使用 ng-bind-html 来简化我构建标题字符串的方式。 HTML 看起来像这样:

<div class="headline slide-and-fade-up" animate-on-change="headline" ng-bind-html="headline"></div>

animate-change 是我正在尝试编写的指令，它会导致标题在更改时进行动画处理。请求的动画是让旧动画向上移动并离开屏幕，而新动画从底部向上移动到位。我构建了一个与 ng-animate 兼容的名为 slide-and-fade-up 的动画，它可以执行我希望它执行的操作。由于我需要在新值出现时为旧值设置动画，因此我需要复制该元素并在 DOM 中让一个具有旧值和一个具有新值，然后让旧值离开。

到目前为止，我的指令是这样的:

angular.module('myApp.directives').directive('animateOnChange', ['$animate',
    function($animate) {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                scope.$watch(attrs.animateOnChange, function(newValue, oldValue) {
                    if (newValue !== undefined && oldValue !== undefined && newValue !== oldValue) {
                        $animate.enter(element.clone(), element.parent(), element);
                        $animate.leave(element);
                    }
                });
            }
        }
    }
]);

这有几个问题:

1. 克隆的元素似乎没有“实时”指令，即它存在于 DOM 中但实际上并未触发此代码，这意味着动画只触发一次然后再也不会触发
2. 进入的元素中有旧值，离开的元素中有新值。我不知道为什么会这样，但基本上完全是倒退

我怎样才能完成这个指令让它做我想做的事？我确实通过使用 ng-if 并观察数据更改并打开 bool 值，等待一小段时间然后重新打开它来让它工作。这行得通，但与带有 $animate Hook 的自包含指令相比，我觉得它太老套了。感谢您的帮助。

Answer 1

编译您传递到 $animate.enter 的克隆内容，然后将原始元素的 innerHTML 设置为作为参数提供给您的 $watch 在调用 $animate.leave 之前:

.directive('animateOnChange', function($animate, $compile) {
  var watchers = {};
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      // deregister `$watch`er if one already exists
      watchers[scope.$id] && watchers[scope.$id]();  
      watchers[scope.$id] = scope.$watch(attrs.animateOnChange, function(newValue, oldValue) {          
        if (newValue !== oldValue) {
          $animate.enter($compile(element.clone())(scope), element.parent(), element);
          element.html(oldValue);
          $animate.leave(element); 
        }
      });
    }
  }
})

注意:由于每次满足 $watch 表达式更改测试时都会重新编译和链接指令，因此您需要考虑到 新 watch 将每次也被创建。

在我的示例中，我将注销函数存储在可从任何已编译指令实例获得的对象中，并在我创建除第一个之外的任何新观察者之前调用它。如果不这样做，每次编译指令时都会看到双倍的观察者数量……显然不是一件好事。

Fork of your JS Bin