Question

我正在开发angular js app。点击按钮提交，我无法在我的应用程序中调用我的控制器。请查看以下示例代码：

的index.html

<!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>

的login.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>

index.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');

loginController.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;
            }
        });
    };
 }

]）;

我没有在浏览器的控制台部分或命令提示符中收到任何错误。

Answer 1

修改type="submit"中的登录按钮，使type="button"代替<button type="submit" ng-disabled="form.$invalid" class="btn btn-primary">Login</button>：

(?<!^(?:[^_]*_[^_]*){3})_

Answer 2

刚刚从控制器中删除了$ rootScope注入器，因为它没有作为参数传递给控制器函数。它工作正常

Answer 3

你没有在html部分分配你的控制器试试这个：

<!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>

在angularjs中没有调用控制器

3 个答案: