Ng-点击不触发
Ng-Click not firing
每当我点击我的提交按钮时没有任何反应,目前我想要它做的就是打印出用户名和密码来测试那里的绑定。
而且我能够与控制器交谈并打印出我在控制器中制作的硬编码消息,似乎 ng-click 不会在该方法上触发。
任何帮助都会很棒,
谢谢 :D
<section id="register-view" class="mainbar">
<section class="matter">
<div class="container">
<div class="row">
<label>{{vm.message}}</label>
<form class="register-form">
<label name="username_label"> Username: </label>
<input type="text" name="username" ng-model="vm.userDetails.username"/>
<br/>
<label name="password_label"> Password: </label>
<input type="text" name="password" ng-model="vm.userDetails.password"/>
<br/>
<button type="submit" class="btn btn-default" ng-click="vm.submitUserDetails()">Submit</button>
</form>
</div>
</div>
</section>
</section>
和控制器class
(function () {
'use strict';
angular
.module('app.register')
.controller('RegisterController', RegisterController);
RegisterController.$inject = ['$q', 'dataservice', 'logger'];
/* @ngInject */
function RegisterController($q, dataservice, logger) {
var vm = this;
vm.message = 'baass';
vm.userDetails = {
username: '',
password: ''
}
function activate() {
var promises = [submitUserDetails()];
return $q.all(promises).then(function () {
logger.info('Activated Dashboard View');
});
}
function submitUserDetails() {
console.log('Username: ' + vm.userDetails.username);
console.log('Password: ' + vm.userDetails.password);
}
}
})();
您需要在控制器上下文中添加 submitUserDetails
以使其在视图中可用,因为您只定义了 submitUserDetails
的函数。您应该将其引用绑定到 vm.submitUserDetails
vm.submitUserDetails = submitUserDetails;
函数需要附加到 $scope
$scope.function submitUserDetails() {
console.log('Username: ' + vm.userDetails.username);
console.log('Password: ' + vm.userDetails.password);
}
您的代码似乎有一些问题,但最大的问题是这些函数实际上并未附加到 'this'(vm
,正如您在代码中所称) .因此,它们不能被作用域访问,因为它们只能在 RegisterController 函数内部访问。
为了解决这个问题,我会将这段代码添加到您的函数的底部:
this.activate = activate;
this.submitUserDetails = submitUserDetails;
另外,submitUserDetails()
应该返回一个承诺,不是吗?我预计这也会导致一些奇怪的行为。
每当我点击我的提交按钮时没有任何反应,目前我想要它做的就是打印出用户名和密码来测试那里的绑定。 而且我能够与控制器交谈并打印出我在控制器中制作的硬编码消息,似乎 ng-click 不会在该方法上触发。 任何帮助都会很棒, 谢谢 :D
<section id="register-view" class="mainbar">
<section class="matter">
<div class="container">
<div class="row">
<label>{{vm.message}}</label>
<form class="register-form">
<label name="username_label"> Username: </label>
<input type="text" name="username" ng-model="vm.userDetails.username"/>
<br/>
<label name="password_label"> Password: </label>
<input type="text" name="password" ng-model="vm.userDetails.password"/>
<br/>
<button type="submit" class="btn btn-default" ng-click="vm.submitUserDetails()">Submit</button>
</form>
</div>
</div>
</section>
</section>
和控制器class
(function () {
'use strict';
angular
.module('app.register')
.controller('RegisterController', RegisterController);
RegisterController.$inject = ['$q', 'dataservice', 'logger'];
/* @ngInject */
function RegisterController($q, dataservice, logger) {
var vm = this;
vm.message = 'baass';
vm.userDetails = {
username: '',
password: ''
}
function activate() {
var promises = [submitUserDetails()];
return $q.all(promises).then(function () {
logger.info('Activated Dashboard View');
});
}
function submitUserDetails() {
console.log('Username: ' + vm.userDetails.username);
console.log('Password: ' + vm.userDetails.password);
}
}
})();
您需要在控制器上下文中添加 submitUserDetails
以使其在视图中可用,因为您只定义了 submitUserDetails
的函数。您应该将其引用绑定到 vm.submitUserDetails
vm.submitUserDetails = submitUserDetails;
函数需要附加到 $scope
$scope.function submitUserDetails() {
console.log('Username: ' + vm.userDetails.username);
console.log('Password: ' + vm.userDetails.password);
}
您的代码似乎有一些问题,但最大的问题是这些函数实际上并未附加到 'this'(vm
,正如您在代码中所称) .因此,它们不能被作用域访问,因为它们只能在 RegisterController 函数内部访问。
为了解决这个问题,我会将这段代码添加到您的函数的底部:
this.activate = activate;
this.submitUserDetails = submitUserDetails;
另外,submitUserDetails()
应该返回一个承诺,不是吗?我预计这也会导致一些奇怪的行为。