Angularjs按范围变量划分失败

这工作：

{{ (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>

'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); 
    }); 

})

来源

2014-10-07 Tyler Durden

我猜这是一个计时问题。在设置secondsToAnswer之前，页面表达式{{...}}将得到评估。尝试使secondsToAnswer函数返回您感兴趣的值。 – Scott 2014-10-07 22:31:00

@Scott谢谢，我已经尝试过了，但它是别的。 – 2014-10-07 22:52:42

由于所有打开的尖括号在git上被更改为<，所以很难阅读它们的示例代码。但是我想知道这个问题是不是你的控制器作用域设置了secondsToAnswer变量，并且指定了秒的指令作用域没有连接。 – 2014-10-07 23:44:37

这是因为$scope.secondsToAnswer = 10;将只在startTimer所运行，直到那个时候$scope.secondsToAnswer将是不确定的执行。

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

来源

2014-10-08 07:45:52

我认为这是他们第一次出现问题时的第一行，但我会在我回家时检查它。 – 2014-10-08 10:15:04

不，这不是 – 2014-10-11 13:00:12

就是这样，再加上别的东西:)我不知道你的源代码是否完整，但是没有'seconds'声明。你可以在你的控制器开始处做一个'console.log（$ scope.seconds）;'看看它是否有价值。 – 2014-10-13 10:10:56

我觉得问题来自两个地方。首先作为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>

I made a working jsfiddle demo here：

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); 
    }); 

});

来源

2014-10-12 01:01:28 axelduch

两件事情

的$ scope.secondsToAnswer应在调用startTimer时不在全局函数中声明。
在HTML代码中，您应该包装需要使用范围的区域。在这种情况下，在计时器指令内

来源

2014-10-15 08:37:06 geckob

Angularjs按范围变量划分失败

回答

相关问题