我正在尝试使用angularjs 1.5制作一个表单以从服务器获取令牌,但是单击时我没有收到任何结果或错误消息。
我使用 AngularUI 路由器来设置表单的路由...
// otras rutas
.state('login', {
url: '/login',
templateUrl: '/app/auth/_login.form.html',
controler: 'LoginController',
controllerAs:'in'
});
// otras rutas
我可以正确显示我的表单:
<!-- Archivo: /app/auth/_login.form.html -->
<div class="row">
<div class="offset-sm-3 col-sm-6">
<h2>Formulario de Ingreso</h2>
<form role="form" name="form">
<div class="form-group">
<label for="username">Nombre de Usuario</label>
<input type="text" data-ng-model="in.credentials.username" name="username" id="username" class="form-control" required />
<span></span>
</div>
<div class="form-group">
<label for="password">Contraseña</label>
<input type="password" data-ng-model="in.credentials.password" name="password" class="form-control" id="password" />
</div>
<div class="form-actions">
<button data-ng-submit="in.login(in.credentials)" type="submit" id="submit" class="btn btn-primary">Ingresar</button>
</div>
</form>
</div>
</div>
在提交按钮中,我确定单击该函数时将in.login()
其credentials
作为参数调用。这是控制器。
(function(angular){
'use strict';
function LoginController($scope, $rootScope, auth, session){
var self = this;
var _credentials = $scope.credentials;
var _login = function(_credentials){
// console.log(_credentials);
// ^^^^^^^^^^^^^^^^^^^^^^^^^^ Esta línea **nunca se ejecuta**
auth
.logIn(_credentials)
.then(function(){
_user = session.getUser();
});
};
self.login = _login;
self.credentials = _credentials;
}
LoginController.$inject = ['$scope', '$rootScope', 'auth', 'session'];
angular.module('cmi')
.controller('LoginController', LoginController);
})(angular);
依赖项auth
和session
是请求令牌并将其保存在其中的服务LocalStorage
,据我说,它的操作已经过验证。
问题
单击 Enter 按钮不执行任何操作。控制台中没有错误消息,并且我放入的调试行_login()
永远不会运行。
我想知道我做错了什么以及如何纠正我的错误。
预期结果如下:我输入用户名和密码并按下提交按钮。这两个数据被传递给auth
将它们发送到返回令牌的服务器的服务。但我无法跨过第一步。
谢谢。
问题出在执行代码的指令中
该指令的
ng-submit
作用是如果你去文档
该指令应该在您的
form
不像现在这样在按钮上。您可以通过将其更改为 将其放在按钮上
ng-click
。angular表单提交规则如下
ng-submit
元素指令form
ng-click
第一个按钮或input
类型的指令submit
为避免事件的双重执行,请使用其中一个
ng-click
或两个,ng-submit
但不能同时使用。顺便说一句,你不需要写
因为
vm.credentials
oin.credentials
在您的控制器中可用,所以您可以编写并直接使用代码中的值。