ダイアログでボタンをクリックすると動作しない

Question

私はinstructions.htmlというHTMLページを持っています。このページのボタンをクリックすると、quiz-list.htmlにナビゲートされ、「クイズ開始」ボタンで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（）メソッドにも行きません。

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呼び出しは1つの問題です。 controllerAs構文はコードには適用されず、ウェルカムページでコントローラを指定します。だから、次は十分です：

  ngDialog 
  .open({ 
       template : 'welcome.html', 
       className : 'ngdialog-theme-default' 
  }); 
  

• もう一つの問題は、あなたが状態はapp.kbcquizと呼ばれる宣言することです。これは、実際にはappという状態を持つ必要があることを意味し、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>