在ng-dialog中单击按钮不工作

Click on button in ng-dialog is not working

本文关键字:工作 按钮 单击 ng-dialog      更新时间:2023-09-26

我有一个叫做instructions.html的HTML页面。当我点击这个页面上的按钮时,它应该导航到quiz-list.html,并打开带有"Start quiz"按钮的ng-dialog。当我点击这个按钮,弹出应该消失,并开始测试。但是点击按钮并没有发生。

下面是instructions.html页面。

<div class="container-fluid" ng-controller="KbcQuizController">
    <div class="instructions-container">
        <div class="instructions-heading">
            <span class="header-text"> Rules </span>
        </div>
        <div>
            <p>1. Persons must enter the Competition on their own behalf and
                entry(ies) by proxy will not be accepted, even for their family
                members.</p>
            <p>2. An entry/ies is not transferrable.</p>
            <p>3. The Company or the Producers will not entertain any claims
                / questions / queries with respect to the authenticity or
                correctness of any questions and answers for the questions asked in
                any round of the Competition.</p>
            <p>4. The Company’s decision on the correctness or incorrectness
                of any answer is final and binding on all Contestants.</p>
            <p>5. Use of mobile phones will not be permitted during the
                shoot, and during the Auditions. It may lead to disqualification.</p>
        </div>
        <div class="next-container">
            <button class="next-button btn btn-primary" ng-click="getWelcomePage()">Start Quiz</button>
        </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) {
        console.log("quizService is::" + quizService);
        $scope.count = 1;
        $scope.timer = {
            value : 60
        }
        var stopped;
        $scope.startTimer = function() {
            stopped = $timeout(function() {
                console.log($scope.timer.value);
                $scope.timer.value--;
                $scope.startTimer();
                if ($scope.timer.value == 0) {
                    alert("timeout");
                }
            }, 1000);
        };
        $scope.stop = function() {
            $timeout.cancel(stopped);
        }
        $scope.reset = function() {
            $scope.timer.value = 60;
        }
        $scope.startQuiz = function() {
            console.log("in start quiz");
            quizService.getQuestion($scope.count).then(null, function(err) {
                console.log("error in get question");
            });
            $scope.startTimer();
        }
        $scope.getWelcomePage = function() {
            $state.go('quizpage');
            ngDialog
                    .open({
                        template : 'app/modules/kbcquiz/welcome.html',
                        className : 'ngdialog-theme-default',
                        controller : KbcQuizController,
                        controllerAs : 'vm',
                        scope : $scope,
                    });
        }
    }
})();

这是我的模块:

(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',
        })
        .state('quizpage', {
            url : '/app/kbc-quiz',
            templateUrl : 'app/modules/kbcquiz/quiz-list.html',
        });
    }
})();

这里是welcome。html:

<h3 class="dialog_header">Welcome to KBC!!</h3>
<div class="dialog-contents" ng-controller="KbcQuizController">
    <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>

请让我知道我错在哪里。因为当我在ng-dialog中点击按钮时它甚至都没有startQuiz()方法

这段代码有几个问题。请在http://embed.plnkr.co/nNMsoxHgP1ZUPizf8nIY/查看工作示例

  • 你不需要type='submit'按钮,除非你确实发布了一些数据。在您的情况下,type='button'就足够了。但这不会引起任何问题。

    <button type="button" class="ngdialog-button ngdialog-button-primary" 
            ng-click="startQuiz(); closeThisDialog('button')">Start Quiz
    </button>
    
  • 你的ngDialog调用是一个问题。controllerAs语法不适用于您的代码,您需要在欢迎页面中指定控制器。因此以下内容就足够了:

    ngDialog
    .open({
            template : 'welcome.html',
            className : 'ngdialog-theme-default'
    });
    
  • 另一个问题是您声明了一个称为app.kbcquiz的状态。这实际上意味着你应该有一个名为app的状态,而kbcquiz将是app的嵌套状态。对于示例,我只是将状态重命名为instructions

    $stateProvider.state('instructions', {
        url : '',
        templateUrl : 'instructions.html'
    })
    

我做了一些其他的调整,只是为了让样本工作(即url,删除了缺失的依赖项)。请查看:-)

您正在使用按钮类型作为提交,并且代码中没有表单标记。使用一个表单标签,然后实现它。

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