Angularjs按作用域变量划分失败

Question

我使用角度计时器。

这项工作：

{{ (seconds / 10) * 100 }}

但这个没有：

{{ (seconds / secondsToAnswer ) * 100 }

（评估为NaN）

但是，我在控制器中将secondsToAnswer设置为10：$scope.secondsToAnswer = 10;它也发生在指令之外。

完整代码：

HTML

<timer interval="1000">
  <div class="progress">
    <div class="progress-bar progress-bar-info progress-bar-striped"
         role="progressbar"
         aria-valuenow="20"
         aria-valuemin="0"
         aria-valuemax="100"
         style="width: {{ (seconds / secondsToAnswer) * 100 }}%">
    </div>
  </div>
</timer>

JS

'use strict';
vocabApp.controller('PracticeController', function ($scope) {
  $scope.expressions = [
    { expression:'cat', meaning:'macska' },
    { expression:'dog', meaning:'kutya' },
    { expression:'whale', meaning:'bálna' }
  ];
  //$scope.timerRunning = true;
  $scope.startTimer = function () {
    $scope.secondsToAnswer = 10;
    $scope.$broadcast('timer-start');
    $scope.timerRunning = true;
  };
  $scope.stopTimer = function () {
    $scope.$broadcast('timer-stop');
    $scope.timerRunning = false;
  };
  $scope.$on('timer-stopped', function (event, args) {
    console.log('timer-stopped args = ', args);
  });
})

Answer 1

这是因为$scope.secondsToAnswer = 10;只会在startTimer运行时执行，直到时间$scope.secondsToAnswer未定义为止。

如果您将$scope.secondsToAnswer = 10;作为控制器中的第一行，那么它应该可以工作。

Answer 2

我认为问题来自两个方面。首先，正如Sander_P所指出的，$scope.secondsToAnswer应该在控制器的顶部定义，而不是在startTimer函数中。现在的另一件事是，你的控制器包装了timer指令，但实际上应该在里面

例如：

 <timer interval="1000">
        <div ng-controller="PracticeController" class="progress">
            <div class="progress-bar progress-bar-info progress-bar-striped" 
                 role="progressbar"
                 aria-valuenow="20"
                 aria-valuemin="0"
                 aria-valuemax="100"
                 style="width: {{ (seconds / secondsToAnswer) * 100 }}%">
            </div>
        </div>
  </timer>

---

我在这里做了一个工作jsfiddle演示：

var vocabApp = angular.module("APP", ['timer']);
vocabApp.controller('PracticeController', function ($scope) {
    $scope.secondsToAnswer = 100;
    $scope.expressions = [{
        expression: 'cat',
        meaning: 'macska'
    }, {
        expression: 'dog',
        meaning: 'kutya'
    }, {
        expression: 'whale',
        meaning: 'bálna'
    }];
    //$scope.timerRunning = true;
    $scope.startTimer = function () {
        $scope.$broadcast('timer-start');
        $scope.timerRunning = true;
    };
    $scope.stopTimer = function () {
        $scope.$broadcast('timer-stop');
        $scope.timerRunning = false;
    };
    $scope.$on('timer-stopped', function (event, args) {
        console.log('timer-stopped args = ', args);
    });
});

Answer 3

1. $scope.secondsToAnswer应在函数外部全局声明，而不是在调用startTimer时声明。

2. 在HTML代码中，应该包装需要使用作用域的区域。在这种情况下，在定时器指令内