Angularjs：コントローラのスコープが変更されたときにビューが更新されない

コントローラのスコープが変更されているときに、ビューが更新されません。私は実際に自分のhtmlでタイマーを使用しようとしています。タイマーがカウントダウンしているときは、ビューで更新されていません。Angularjs：コントローラのスコープが変更されたときにビューが更新されない

は、ここに私の見解である：

(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（）メソッドを呼び出しています：

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

以下は私のコントローラです。以下は抜粋です：

<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

は、あなたがはい、私は与えられている。この

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

出典

2016-11-09 07:39:40 qchap

のようなあなたのindex.htmlでNGアプリディレクティブを追加してもらいます。 – Arnav

あなたは、例えば、より多くの情報がなければ、あなたに応答を与えるのが難しいので、あなたのコードをすべてコードブックに公開することができます。 – qchap

Angularjs：コントローラのスコープが変更されたときにビューが更新されない

答えて

関連する問題