Javascript 在angularjs中未调用控制器
我正在开发AngularJS应用程序。单击“提交”按钮后,我无法在我的应用程序中调用我的控制器。请检查以下示例代码: index.htmlJavascript 在angularjs中未调用控制器,javascript,angularjs,Javascript,Angularjs,我正在开发AngularJS应用程序。单击“提交”按钮后,我无法在我的应用程序中调用我的控制器。请检查以下示例代码: index.html <!DOCTYPE html> <html lang="en" ng-app="adminsuite"> <head> <meta charset ="utf-8"> <title></title> </head> <body> <scrip
<!DOCTYPE html>
<html lang="en" ng-app="adminsuite">
<head>
<meta charset ="utf-8">
<title></title>
</head>
<body>
<script src="bundle.js" charset="utf-8"></script>
<div class="container">
<div ui-view></div>
</div>
</body>
</html>
<div class="col-md-6 col-md-offset-3">
<h2>Login</h2>
<form name="form" ng-submit='login()' role="form">
<div class="form-group" ng-class="{ 'has-error': form.username.$dirty && form.username.$error.required }">
<label for="username">Username</label>
<input type="text" name="username" id="username" class="form-control" ng-model="username" required />
<span ng-show="form.username.$dirty && form.username.$error.required" class="help-block">Username is required</span>
</div>
<div class="form-group" ng-class="{ 'has-error': form.password.$dirty && form.password.$error.required }">
<label for="password">Password</label>
<input type="password" name="password" id="password" class="form-control" ng-model="password" required />
<span ng-show="form.password.$dirty && form.password.$error.required" class="help-block">Password is required</span>
</div>
<div class="form-actions">
<button type="button" ng-disabled="form.$invalid" class="btn btn-primary">Login</button>
</div>
</form>
loginController.js
window.onpopstate = function (e) { window.history.forward(1); }
require('jquery/dist/jquery.js');
require('bootstrap/dist/css/bootstrap.css');
require('./content/common.css');
require('angular');
require('angular-ui-router/release/angular-ui-router.js');
require('angular-route/angular-route.js');
require('angular-cookies/angular-cookies.js');
angular.module('adminsuite', ['ui.router','ngCookies']).config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('login', {
url: '/',
templateUrl: 'Login/login.html',
controller: 'loginController'
})
// HOME STATES AND NESTED VIEWS ========================================
.state('dashboard', {
url: '/dashboard',
templateUrl: 'views/dashboard.html',
});
// ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
});
require('./Login/loginController.js');
require('./services/loginAuthenticationService.js');
require('./services/UserServices.js');
angular
.module('adminsuite')
.controller('loginController', ['$location', '$rootScope', 'AuthenticationService', '$scope', '$state', function($location, AuthenticationService, $scope, $state) {
$scope.login = function(){
$scope.dataLoading = true;
AuthenticationService.Login($scope.username, $scope.password, function (response) {
if (response.success) {
AuthenticationService.SetCredentials($scope.username, $scope.password);
console.log('Login successful');
//$rootScope.state = true;
$state.go('dashboard');
} else {
console.log(response.message);
$scope.dataLoading = false;
//$rootScope.state = false;
}
});
};
}
]))
我在浏览器的控制台部分或命令提示符中没有收到任何错误
您没有在html部分分配控制器。请尝试以下操作:
编辑
login.html
中的登录按钮,使其具有type=“submit”
而不是type=“button”
:
登录
刚刚从控制器中删除了$rootScope注入器,因为它没有作为参数传递给控制器功能。它起作用了您在哪里路由到登录页面?您的login
按钮应该有type='submit'
而不是type='button'
您的代码看起来很好。但是您应该从html中删除type=“button”,因为按钮的默认属性是submit。对于调试,您可以创建一个fiddle,也许我遗漏了一些东西,但我不知道如何引用/调用index.js
。我总是在每个控制器的开头部署一个console.log
,以确保它被正确加载。使用bundle.js我将index.js引用到我的项目中。我使用webpack完成了这项工作。他在ui路由器配置中定义了它,因此不需要ng控制器ui路由器
来处理,我将按钮类型更改为“提交”,然后它也不工作。我没有收到任何控制台错误或任何东西。这就是为什么如果您在$scope.login
的第一行添加控制台.log
,我无法找到它,它会显示吗?只是为了确保这在您的AuthenticationService中不是问题。尝试在loginController函数的第一行添加console.log
行,以检查控制器是否已实际初始化。另外,确保没有缓存旧的login.js,因此使用浏览器html检查器检查按钮的类型是否为class='submit'。除此之外,不知道会有什么问题……正如您所说,我添加了这行代码console.log('start');在$scope.login之前,它会显示在控制台中,但再次单击该按钮时,它不会触发控制器。我今天才面对这个问题。谢谢你,我知道了。在登录控制器中,我注入$rootScope,但不传递到函数参数中。我刚把它取下来,它就起作用了。问题是,在这个问题上,他们并没有表现出任何错误。
<!DOCTYPE html>
<html lang="en" ng-app="adminsuite">
<head>
<meta charset ="utf-8">
<title></title>
</head>
<body ng-controller="loginController">
<script src="bundle.js" charset="utf-8"></script>
<div class="container">
<div ui-view></div>
</div>
</body>
</html>
<button type="submit" ng-disabled="form.$invalid" class="btn btn-primary">Login</button>