Question

我正在玩Angular Timer，我想要做的就是能够改变事件的“倒计时”。我试过这个

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

我的控制器的胆量看起来像

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

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

Answer 1

您不需要属性中的双曲线{{...}}，因为它已被解释为角度表达式。因此，以下内容将根据范围变量countdown设置属性：

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

控制器中包含以下内容：

$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

Answer 2

我会尝试使用某种$ watch观察何时想要改变倒计时。

确保指令控制器中的倒计时变量绑定到父作用域。（例如scope: {countdown: '='}或类似的东西）

Answer 3

我认为您需要在指令中使用“=”isolate scope选项来实现此目的。根据我的理解，这允许您将控制器属性绑定到指令，反之亦然。

您需要更改倒计时attr才能使用控制器对象：

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

您的控制器看起来像这样：

app.controller("TimerCtrl", function($scope) {
$scope.timerRunning = true;
$scope.countdown    = 10;
});

你的指令将是：

app.directive("timer", function() {
return {
    restrict: "E",
    transclude: true,
    scope: {
        countdown: "="
    },
    template: '<div ng-transclude></div>',
    link: function (scope, element) {
        scope.incrementCountdown = function (amount) {
            scope.countdown += parseint(amount, 10);
        }

        // something that would trigger the increment, could be whatever
        element.bind('click', function () {
            scope.incrementCountdown(10); // could also pull the param value from an attribute on your directive
        });
    }
}
});

这样，如果您更改指令范围内的倒计时，它也应该更新控制器中的模型。

我没有运行这个代码所以它可能没有错误，而且我是一个Angular n00b，所以我希望我不会把你引入歧途，但我相信如果这是错误的话，别人会说话。祝你好运。

如何动态更新角度指令属性？

3 个答案: