Angular ng-submit不會觸發所需的控制器方法

Question

在Angular 1.4.7中，我試圖在此plunk中實現基本登錄表單http://plnkr.co/edit/xQEN1ZNN5ZEw1CSwNw97?p=preview（請單擊Home路由上的紅色Log into Dashboard按鈕）。

但是由於某些原因，我無法使用login()方法在我的loginCtrl控制器代碼中觸發。

相反，它所做的是舊式的URL重定向，並將用戶/密碼參數作爲表單變量傳入。我無法弄清楚什麼是錯的。

這裏

關鍵點在我貼出代碼：

1）登錄-form.html包含ng-submit="login.loginUser()"

2）的app.config包含登錄路線'login'它掛接到'LoginCtrl as login'

3 ）'LoginCtrl'包含匿名方法login.loginUser

4）app.js重定向到我的login狀態如果userId未定義。

這裏是login-form.html模板：

<div ng-show="error" class="alert alert-danger">{{error}}</div> 
 
<form name="form" ng-submit="login.loginUser()" role="form"> 
 
    <div class="form-group"> 
 
     <label for="username">Username</label> 
 
     <i class="fa fa-key"></i> 
 
     <input type="text" name="username" id="username" class="form-control" ng-model="login.username" required /> 
 
     <span ng-show="form.username.$dirty && form.username.$error.required" class="help-block">Username is required</span> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="password">Password</label> 
 
     <i class="fa fa-lock"></i> 
 
     <input type="password" name="password" id="password" class="form-control" ng-model="login.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="submit" ng-disabled="form.$invalid || dataLoading" class="btn btn-danger">Login</button> 
 
     <img ng-if="login.dataLoading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="/> 
 
    </div> 
 
</form>

和我的登錄控制器代碼：

(function() { 
 
    'use strict'; 
 
    angular.module('rage').controller('LoginCtrl', 
 
     ['$rootScope', '$scope', '$cookies', '$modalInstance', '$q', 'datacontext', 'loginService', 'userService', authenticate]); 
 

 
    function authenticate($rootScope, $scope, $cookies, $modalInstance, $q, datacontext, loginService, userService) { 
 

 
     var login = this; 
 

 
     login.loginUser = function() { 
 
      login.dataLoading = true; 
 
      loginService.authUser(login.user, login.password); 
 
     }; 
 

 
    } 
 
})();

以下是與路由的app.config：

angular 
 
.module('rage') 
 
.config(config); 
 

 
function config($stateProvider, $urlRouterProvider) { 
 
$urlRouterProvider.otherwise("/login"); 
 
$stateProvider 
 
.state('main', { 
 
    url: "/dashboard", 
 
    templateUrl: "app/views/dashboard.html", 
 
    controller: 'MainCtrl', 
 
    data: { pageTitle: 'RAGE', requireLogin: true } 
 
}) 
 
.state('login', { 
 
    url: "/login", 
 
    templateUrl: "app/components/login/login-form.html", 
 
    controller: 'LoginCtrl' 
 
    controllerAs: 'login' 
 
}) 
 

 
}

和我app.js

(function() { 
 
    'use strict'; 
 
    angular.module('rage', [ 
 
     'ui.router', 
 
     'ui.bootstrap', 
 
     'ui.dashboard', 
 
     'kendo.directives', 
 
     'ngCookies'  
 
    ]).run(['$rootScope', '$state', '$location', 'userService', 'loginService', init]); 
 

 
    function init($rootScope, $state, $location, userService, loginService) { 
 
     $rootScope.rageSessionVars = {}; 
 
     $rootScope.$state = $state; 
 

 
     
 
     if ($rootScope.rageSessionVars.userID == undefined) { 
 
      $state.go('login'); 
 
     } 
 
       
 
    } 
 

 
})();

Answer 1

看起來沒有創建任何模塊。您正在編寫angular.module('rage')，而應該在您的app.config文件中寫入angular.module('rage', [])。

從DOC：https://docs.angularjs.org/api/ng/function/angular.module

要創建一個新的模塊：

// Create a new module 
var myModule = angular.module('myModule', []); 

然後定義你的模塊在你的HTML的身體或<html>標籤ng-app="rage"。

因爲您根本沒有創建任何模塊，也沒有在您的HTML中啓用Angular，所以您的表單會像提交舊式表單一樣提交。

所以修改您的應用程序配置爲：

var myModule = angular.module('rage', []) 
    .config(config) // ... your code 

而且，控制器代碼是好的，但你也可以使用它像：

myModule.controller('LoginCtrl', function() {}) // ....