在ng-dialog中单击按钮不工作
Click on button in ng-dialog is not working
我有一个叫做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>
相关文章:
- 扩展移相器按钮类不工作
- PHP Javascript显示/隐藏按钮不工作
- Facebook登录按钮没有'不能在Firefox上工作
- 为什么不是'这个jQuery汉堡包按钮不工作
- 隐藏uib弹出按钮点击不工作
- Spring WebFlow2 Javascript只在第一个单选按钮上工作
- 带有向下钻取的 Amchart 图表工作正常,但“后退”按钮不起作用
- 按钮不'我不工作;我又回到了起始页
- 主干点击事件按钮不工作
- 为什么不't在iOS上启动按钮下拉工作
- 类似按钮增量计数器不工作.PHP,AJAX,MySQL,javascript
- Hammer.js滑动不会'单击按钮后才能工作
- Sencha Touch使一个简单的按钮工作
- 提交按钮只能在onchange调用输入文本后第二次点击时工作
- JavaScript 按钮不起作用;代码与其他工作按钮相同
- 如何获得内置进度条的工作按钮动画
- Syncfusion grid with angular support:向rowTemplate中添加工作按钮
- Ng-disabled不工作按钮
- 让Select2 Gem与ActiveAdmin一起工作按钮
- 点击isn't工作按钮