javascript - 如何动态更新 Angular Directive(指令)属性？

Question

我正在玩Angular Timer ，我想做的是能够更改事件的“倒计时”。我已经尝试过了

<timer interval="1000" countdown="{{countdown}}">{{minutes}}:{{seconds}}</timer>

我的 Controller 的内部看起来像

// setup
...
$scope.timerRunning = true;
$scope.countdown    = 10;
...

我希望能够根据 Controller 中处理的条件动态更新倒计时，例如让它在每次完成时添加 10(我知道如何处理该事件，这只是使指令更新倒计时的问题)

Answer 1

您不需要在属性中使用双花括号 {{ ... }}，因为它已经被解释为 Angular 表达式。因此，以下将根据作用域变量 countdown 设置属性:

<timer interval="1000" countdown="countdown"/>{{minutes}}:{{seconds}}</timer>

在 Controller 中添加以下内容:

$scope.countdown= 120;

动态更新

挑战是动态更新计时器。默认情况下，在摘要周期中不会监视指令属性。因此，一旦倒计时开始，它就不会再次检查该属性。例如，如果您使用这样的按钮来更新倒计时:

<button ng-click="setCountdown(20)">set to 20</button>

有了这个功能

$scope.setCountdown = function(newVal) {
  $scope.countdown =newVal;
}

单击按钮将更新倒计时变量，但计时器不会受到影响。

解决方案

该计时器指令的作者提供了一个计时器启动事件，我们可以在 setCountdown 函数中使用，如下所示:

$scope.setCountdown = function(newVal) {
  $scope.countdown =newVal;
  $timeout(function(){
     $scope.$broadcast('timer-start');
  },0);
}

这里我们更新倒计时，然后发出 timer-start 事件来重新启动计时器。请注意，我在 $timeout 内发出广播，以确保属性已更新。如果没有 $timeout，结果将不一致。

Demo