javascript - Angular 最佳实践。 Controller Action 触发动画

Question

我想在等待(轮询)服务器时显示一些进度圈。我正在使用一些 jquery Circle-progress 插件。我想弄清楚有条件地启动循环进度，然后在某个时候通知它停止的最常见方法是什么。然后我想让这个圆圈完成整轮(额外时间)并通知 Controller “圆圈”动画已完成。

我现在所做的，我将创建循环进度指令，并观察一些属性以了解何时开始/停止动画。然后，当观察到的 completed 属性更改为 true 时，指令完成当前正在执行的循环，执行一些额外的动画(淡出)并调用“on-change”属性来通知 Controller 。

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

这是处理这种情况的常见方法吗？也许我应该尝试用动画来做这些事情？当我想将一些现有的 jquery UI 功能 集成到 Angular 应用程序中时，我总是遇到这个问题。

附注我希望这个指令可以在许多不同的 Controller 中重用。

Plunker example with 'stopping' animation and notifying controller

Answer 1

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

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

});

就像这样。