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按範圍變量劃分失敗

回答

相關問題