如何使用 AngularJS 为未更改的 ng-repeat 设置动画

Question

我有一个看起来像这样的模板：

<p ng-repeat="item in myobj.items" class="toAnimate">{{item}}</p>

我想使用 animate 模块使用文档中描述的 JavaScript 方法对元素执行 jQueryUI addClass/removeClass 动画：

ngModule.animation('.toAnimate', function() {
  return {
    enter: function(element) {
      element.addClass('pulse').removeClass('pulse', 2000);
    }
  };
});

这很好用，但问题是，由于我想使用p.toAnimate 元素来显示状态消息，它不会根据角度改变内容。

为了进一步分解，假设我有一个名称字段。当我单击Save 时，会显示消息Name was saved successfully.。现在如果我修改名称并再次单击保存，假设保存成功，则应重新显示消息以向用户反馈新编辑的名称。然而，脉冲并没有发生，因为 myobj.items 中的项目在技术上并没有改变。

我意识到我可以在一段时间后删除该项目（这可能是我实施真正解决方案的途径），但我仍然有兴趣看看是否可以使用AngularJS。

我想要做的是向 angular 注册该消息应该被视为新消息，即使它不是。有没有办法做到这一点？

与此相关的小提琴：http://jsfiddle.net/Jw3AT/

---

更新

我的回答中$scope.$$phase 方法存在问题，所以我仍在寻找“正确”的方法来做到这一点。基本上，$scope.$$phase 总是返回$digest，这会导致条件失败。删除条件会在界面中给出正确的结果，但会抛出 $rootScope:inprog。

Answer 1

我找到的一个解决方案是在控制器函数中间添加一个$apply：

$scope.updateThingy = function () {
    $scope.myobj.items = [];
    if (!$scope.$$phase) {
        $scope.$apply();
    }
    $scope.myobj.items = ['Your name was updated.'];
};

更新小提琴：http://jsfiddle.net/744Rv/

可能不是最好的方法，但它是一个答案。