Angularjs：当控制器中的范围发生变化时，视图不会更新答案

【问题标题】：Angularjs: View is not updating when scope in controller changesAngularjs：当控制器中的范围发生变化时，视图不会更新
【发布时间】：2016-11-09 07:02:13
【问题描述】：

当我在控制器中的范围发生变化时，视图不会更新。我实际上是在尝试在我的 html 中使用计时器。当计时器倒计时时，它不会在视图中更新。

这是我的看法：

<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() 方法。下面是sn-p：

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

        });

    }
})();

请告诉我哪里出错了。

【问题讨论】：

标签： angularjs angularjs-scope

【解决方案1】：

你有没有像这样在 index.html 中添加 ng-app 指令

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

【讨论】：

是的，我已经给了。
例如，您能否将所有代码发布在 codepen 上，因为没有更多信息很难给您回复。