Нажмите на кнопку в ng-диалоге не работает

Question

У меня есть HTML-страница, называемая instructions.html. Когда я нажимаю кнопку на этой странице, она должна наивно доверять quiz-list.html и открывает ng-диалог с кнопкой «Начать викторину». Когда я нажимаю на эту кнопку, всплывающее окно должно исчезнуть и начать викторину. Но щелчок на кнопке не происходит.

Ниже приведена страница инструкций. 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. Это на самом деле означает, что у вас должно быть состояние, называемое приложением, а kbcquiz будет вложенным состоянием приложения. Для образца, я просто переименовал государство instructions

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

Я сделал несколько других приспособлений, просто для образца работы (то есть URL, удаленные отсутствующие зависимости). Пожалуйста, проверьте это :-)

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>