點擊ng對話框中的按鈕不起作用

Question

我有一個名爲instructions.html的HTML頁面。當我點擊這個頁面上的按鈕時，它應該通過測驗list.html並打開一個「開始測驗」按鈕打開對話框。當我點擊這個按鈕時，彈出窗口會消失並開始測驗。但點擊按鈕沒有發生。

下面是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對話框中的按鈕時，它甚至不會啓動startQuiz（）方法。

Answer 1

該代碼有幾個問題。請http://embed.plnkr.co/nNMsoxHgP1ZUPizf8nIY/

• 檢查工作示例，你並不需要一個類型=「提交」按鈕，除非你確實張貼了一些數據。在你的情況下，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' 
  }) 
  

我做了一些其他的改動，只是對樣品的工作（即網址，刪除丟失的依賴）。請檢查:-)

Answer 2

您正在使用按鈕類型作爲提交，並且代碼中沒有表單標記。 使用表單標籤，然後執行它。

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