角度最佳实践。触发动画的控制器动作

Question

我想在等待（轮询）服务器时显示一些进度圈。我为此使用了一些 jquery circle-progress 插件。我想弄清楚有条件地开始循环进度的最常见方法是什么，然后在某个时间通知它停止。然后我想让这个圈子完成整轮（加时赛）并通知控制器“圈子”动画完成。

我现在所做的，我会为循环进度创建指令，并观察一些属性以了解何时开始/停止动画。然后，当观察到completed 属性变为true 时，指令完成当前执行的循环，做一些额外的动画（淡出）并调用'on-change' 属性来通知控制器。

对我来说，看起来我做的太复杂了。我需要观察许多属性“何时开始”、“何时停止”，然后是回调方法的额外属性。

对于这种情况，这是一种常见的方法吗？也许我应该尝试用动画来做这些事情？当我想将一些现有的jquery UI features 集成到 Angular 应用程序中时，我一直面临这个问题。

附：我希望这个指令可以在许多不同的控制器中重复使用。

Plunker example with 'stopping' animation and notifying controller

Answer 1

我不会把它放在控制器中，指令是 DOM 交互的正确位置。根据我对您的问题的了解，您需要注意页面上多个区域的变化。您不一定需要为此观察多个变量。您可以将多个变量名称作为属性传递给指令，然后设置

scope.$watch(attrs.MyVar, function () {
      //Do something 
      scope[attrs.MyFunc]();

});

像这样。