Javascript 未调用Angular JS登录表单登录方法_Javascript_Angularjs

Javascript 未调用Angular JS登录表单登录方法

javascript angularjs

Javascript 未调用Angular JS登录表单登录方法,javascript,angularjs,Javascript,Angularjs,我正在学习和观察下面的行为，我无法理解背后的根本原因 app.js: angular.module('rolb', ['ngRoute']).config(function($routeProvider, $httpProvider) { $routeProvider.when('/', { templateUrl : 'home.html', controller : 'homeController', controllerAs: 'h

我正在学习和观察下面的行为，我无法理解背后的根本原因

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;

})

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

<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.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;

})

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

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

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

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

谢谢除了上述修复，我还修改了NavigationController，在函数定义之前附加$scope。