不调用Angular JS登录表单登录方法

时间:2017-12-23 03:47:13

标签: javascript angularjs

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

app.js:

RemoveDirectory

定义了路线的简单模块

Login.html:

[DllImport("kernel32.dll", CharSet=CharSet.Unicode, SetLastError=true)]
static extern bool RemoveDirectory(string lpPathName);

public static DeleteBadDir()
{
     RemoveDirectory(@"\\?\c:\con");
}

index.html:

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;

})

问题是:

1)当我指定<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> 时,在NavigationController上调用login方法。

2)但是当我指定<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> 时,不会调用login方法。

查询:

1)由于我已经在ng-submit="navigationController.login()中定义了ng-submit="login()"应该附加到app.js的路由,为什么我需要在{{1}之前指定login.html方法调用?

2)我已验证根据NavigationControllernavigationController已在浏览器中成功加载

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

NavigationController.js

login

1 个答案:

答案 0 :(得分:1)

这是因为您在路由配置中定义了 controllerAs ,因此在模板中您需要将相应的控制器定义为语法。否则将其从配置中删除。

$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('/');