Angularjs：当控制器中的作用域更改时，视图不会更新

当我的控制器的作用域发生更改时，视图不会更新。我实际上试图在我的HTML中使用一个计时器。当定时器倒计时时，它不会在视图中更新。Angularjs：当控制器中的作用域更改时，视图不会更新

这里是我的看法：

<div class="quiz-container" ng-controller="KbcQuizController"> 
<div class="clockdiv"> 
     <div class="timer"> 
      <span class="second">{{timer.value}}</span> <img class="timer-icon" 
       src="/app/images/timer.png"> 
     </div> 
    </div> 
</div>

下面是我的控制器：

(function() { 

    'use strict'; 

    angular.module('app.kbcquiz').controller('KbcQuizController', 
      KbcQuizController); 

    KbcQuizController.$inject = [ '$timeout', '$rootScope', '$scope', '$http', 
      '$filter', 'ngDialog', 'usSpinnerService', 'quizService', '$state' ]; 
    function KbcQuizController($timeout, $rootScope, $scope, $http, $filter, 
      ngDialog, usSpinnerService, quizService, $state) { 
$scope.timer = { 
     value : 60 
    } 
    $scope.counter = 60; 
    var timeinterval; 
    var mytimeout; 
    $scope.onTimeout = function() { 
       $scope.timer.value--; 
       console.log("counter is::" + $scope.timer.value); 
       mytimeout = $timeout($scope.onTimeout, 1000); 
       if ($scope.timer.value == 0) { 
        alert("timeout"); 
        $scope.stop(); 
       } 
      } 

      $scope.start = function() { 
       $scope.timer.value = 60; 
       mytimeout = $timeout($scope.onTimeout, 1000); 
      } 

      $scope.stop = function() { 
       alert("in stop") 
       $timeout.cancel(mytimeout); 
      } 

      $scope.startQuiz = function() { 
       quizService.getQuestion($scope.count, timer.reset, timer.start) 
         .then(null, function(err) { 
          console.log("error in get question"); 
         }); 
       $scope.start(); 
      } 
} 
})();

我打电话从一个对话框，在控制器的startQuiz（）方法。下面是摘录：

<h3 class="dialog_header">Welcome to KBC!!</h3> 
<div class="dialog-contents"> 
    <div class="ngdialog-message"> 
     <div> 
      <div class="next-button"> 
       <button type="submit" 
        class="ngdialog-button ngdialog-button-primary" 
        ng-click="startQuiz(); closeThisDialog('button')">Start Quiz</button> 
      </div> 
     </div> 
    </div> 
</div>

下面是我的模块：

(function() { 
    'use strict'; 
    var module = angular.module('app.kbcquiz', [ 'ui.router', 
      'angularUtils.directives.dirPagination', 'ng-bootstrap-datepicker', 
      'ngDialog', 'angularSpinner' ]); 


    module.config(appConfig); 

    appConfig.$inject = [ '$stateProvider' ]; 

    function appConfig($stateProvider) { 
     $stateProvider.state('app.kbcquiz', { 
      url : '/rules', 
      templateUrl : 'app/modules/kbcquiz/instructions.html', 
     // controller : 'KbcQuizController', 
     // controllerAs : 'vm' 
     }) 

     .state('quizpage', { 
      url : '/app/kbc-quiz', 
      templateUrl : 'app/modules/kbcquiz/quiz-list.html', 
     // controller : 'KbcQuizController', 
     // controllerAs : 'vm' 

     }); 

    } 
})();

请让我知道我错了。

来源

2016-11-09 Arnav

你有没有在您的index.html添加NG-程序指令这样

<html ng-app="app.kbcquiz">

来源

2016-11-09 07:39:40 qchap

是的，我已经给了。 – Arnav

你是否可以在codepen上发布你的所有代码，例如因为没有更多的信息，很难给你答复。 – qchap

Angularjs：当控制器中的作用域更改时，视图不会更新

回答

相关问题