Question

当控制器中的示波器发生变化时，视图不会更新。我实际上是想在我的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（）方法。以下是摘录：

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

        });

    }
})();

请让我知道我哪里出错了。

Answer 1

您是否在index.html中添加了ng-app指令

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

Angularjs：当控制器中的范围更改时，视图不会更新

1 个答案: