gpt4 book ai didi

javascript - Angular JS 登录表单登录方法未调用

转载 作者:行者123 更新时间:2023-12-03 02:49:30 25 4
gpt4 key购买 nike

我正在学习 Angular 并观察以下行为,但我无法理解其背后的根本原因。

app.js:

angular.module('rolb', ['ngRoute']).config(function($routeProvider, $httpProvider) {

$routeProvider.when('/', {
templateUrl : 'home.html',
controller : 'homeController',
controllerAs: 'homeController'
}).when('/login', {
templateUrl : 'login.html',
controller : 'navigationController',
controllerAs: 'navigationController'
}).when('/subscribeConfirm', {
templateUrl : 'subscribe.html',
controller : 'subscriptionController',
controllerAs: 'subscriptionController'
}).otherwise('/');

$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
$httpProvider.defaults.headers.post = {};
$httpProvider.defaults.headers.put = {};
$httpProvider.defaults.headers.patch = {};
/*if this is not set , after successfull authentication for first time , the next request doesn't contain JSESSIONID and hence session is not established
requiring again /login request*/
$httpProvider.defaults.withCredentials = true;

})

定义了路由的简单模块

登录.html:

<form role="form" ng-submit="navigationController.login()">
<div class="form-group">
<label for="username">Username:</label> <input type="text"
class="form-control" id="username" name="username" ng-model="navigationController.credentials.username"/>
</div>
<div class="form-group">
<label for="password">Password:</label> <input type="password"
class="form-control" id="password" name="password" ng-model="navigationController.credentials.password"/>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

index.html:

<body ng-app="rolb" ng-cloak class="ng-cloak">
<div class="container">
<ul>
<li><a href="#/">home</a></li>
<li><a href="#/login">login</a></li>
<li ng-show="authenticated"><a href="" ng-click="logout()">logout</a></li>
</ul>
</div>
<div ng-view class="container"></div>
<script src="js/angular-bootstrap.js" type="text/javascript"></script>
<script src="js/app.js"></script>
<script src="js/homeController.js"></script>
</body>
</html>

问题是:

1)当我指定 ng-submit="navigationController.login() 时,将在 NavigationController 上调用登录方法。

2)但是当我指定 ng-submit="login()" 时,不会调用登录方法。

查询:

1)由于我已经在 app.js 中定义了路由,其中​​指出 login.html 应附加到 NavigationController ,为什么我在 login 方法调用之前需要指定 navigationController 吗?

2)我已经验证,根据 index.htmlapp.js 已在浏览器中成功加载

编辑 1:除了下面给出的答案之外,我还修改了 NavigationController 中的函数定义以附加 $scope,如下所示:

NavigationController.js

$scope.login = function() {

$http.post('http://localhost:8080/springbootrest/login', "username=" + encodeURIComponent(credentials.username) +
"&password=" + encodeURIComponent(credentials.password), {
headers : {
"content-type" : "application/x-www-form-urlencoded"
}
}).success(function(data) {
authenticate(function() {
if ($rootScope.authenticated) {
$location.path("/");
$scope.loginError = false;
} else {
$location.path("/login");
$scope.loginError = true;
}
});
}).error(function(data) {
$location.path("/login");
$scope.loginError = true;
$rootScope.authenticated = false;
})
};

最佳答案

这是因为你定义了 controllerAs 在你的路由配置中,所以在模板中你需要将相应的 Controller 定义为语法。否则从配置中删除它。

$routeProvider.when('/', {
templateUrl : 'home.html',
controller : 'homeController',
//remove controllerAs: 'homeController'
}).when('/login', {
templateUrl : 'login.html',
controller : 'navigationController',
//remove controllerAs: 'navigationController'
}).when('/subscribeConfirm', {
templateUrl : 'subscribe.html',
controller : 'subscriptionController',
//remove controllerAs: 'subscriptionController'
}).otherwise('/');

关于javascript - Angular JS 登录表单登录方法未调用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47949576/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com