javascript - Angularjs division by scope variable fails - Stack Overflow

admin管理员组

文章数量:1396092

I use angular-timer.

This works:

{{ (seconds / 10) * 100 }}

But this one does not:

{{ (seconds / secondsToAnswer ) * 100 }

(it evaluates to NaN)

However, I set the secondsToAnswer to 10 in the controller: $scope.secondsToAnswer = 10; It happens outside the directive as well.

Full code:

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

})

I use angular-timer.

This works:

{{ (seconds / 10) * 100 }}

But this one does not:

{{ (seconds / secondsToAnswer ) * 100 }

(it evaluates to NaN)

However, I set the secondsToAnswer to 10 in the controller: $scope.secondsToAnswer = 10; It happens outside the directive as well.

Full code:

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

})

• javascript
• angularjs
• angularjs-directive

Share Improve this question Follow edited Oct 11, 2014 at 23:40 Preview 35.8k1010 gold badges9595 silver badges113113 bronze badges asked Oct 7, 2014 at 21:42 Tyler DurdenTyler Durden 2,20155 gold badges2222 silver badges2626 bronze badges 6

• I'm guessing this is a timing issue. The page expression {{...}} is getting evaluated prior to secondsToAnswer getting set. Try making secondsToAnswer a function that returns the value you are interested in. – Scott Commented Oct 7, 2014 at 22:31
• @Scott Thanks, I've tried it, but it's something else. – Tyler Durden Commented Oct 7, 2014 at 22:52
• It's hard to read their example code due to the fact that all the open angle brackets are changed to < on git. But I wonder if the issue isn't that your controller scope that sets the secondsToAnswer variable and the directive scope that sets the seconds aren't connected. – Amy Blankenship Commented Oct 7, 2014 at 23:44
• can you wrap you timer directive with ng-if='secondsToAnswer', also initialize the secondsToAnswer as the first line of the controller, and let me know the result... – harishr Commented Oct 11, 2014 at 17:07
• I guess the missing } from your second example is an oversight? – Preview Commented Oct 11, 2014 at 23:40

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 5

It is because $scope.secondsToAnswer = 10; will only be executed when startTimer runs, untill that time $scope.secondsToAnswer will be undefined.

If you make $scope.secondsToAnswer = 10; the first line in your controller, then it should work.

I think the problem es from two places. First as Sander_P pointed out, $scope.secondsToAnswer should be defined at the top of your controller and not in within the startTimer function. Now the other thing is that your controller wraps the timer directive but should actually be inside it.

For example:

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

});

Two things

1. The $scope.secondsToAnswer should be declared outside the function globally not when startTimer is called.

2. In HTML code, you should wrap the area where you need to use the scope. In this case, inside the timer directive

本文标签： javascriptAngularjs division by scope variable failsStack Overflow