Question

我是Angular JS的新手，正在尝试在路线上打招呼。

我从用户那里获取用户名和密码并调用rest服务进行验证，onSuccess我想打开我的主页所在的其他网址。但是$location.path('/AddNewOrder');没有调用控制器。

我尝试了很多像$location.path('/AddNewOrder') , $location.$apply();但没有成功的事情。

由于这些事情，我觉得Angular JS很头疼。

app.js

var validationApp = angular.module('LoginApp', ['ngRoute']);
validationApp.controller('mainController', function($scope,$http,$location,$timeout) {

    validationApp.config(['$routeProvider',
          function($routeProvider,$locationProvider) {
            $locationProvider.html5Mode(true).hashPrefix('!');
            $routeProvider.
              when('/AddNewOrder', {
                templateUrl: 'html/dashboard.html',
                controller: 'AddOrderController'
            }). 
            otherwise({
                redirectTo: '/AddNewOrder'
            });
        }]);
        validationApp.controller('AddOrderController', function($scope) {
            $scope.message = 'This is Add new order screen';       
        });
        validationApp.controller('ShowOrdersController', function($scope) {
            $scope.message = 'This is Show orders screen';
        });

    $scope.submitForm = function($route) {

        if ($scope.userForm.$valid) { 

            var update_path = "http://localhost:8080/IPOCCService/rest/UserManager/validate";
            var data1 = angular.toJson($scope.user);
            $http({
                url: update_path, 
                method: "POST",
                data:  data1
            }).
            success(function(data, status, headers, config) {
                $location.path('/AddNewOrder');
            }).
            error(function(data, status, headers, config) {
                alert("failure");
            });
        }else{
            alert('Please provide missing data..');
        }
    };
});

的index.html

<!DOCTYPE html>
<html ng-app="LoginApp">
<head>
    <script src="js/angular.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.min.js"></script>
    <script src="js/app.js"></script>
</head>
<body ng-controller="mainController">
    <form name="userForm" ng-submit="submitForm()" novalidate>
            <label>Name*</label>
            <input type="text" name="username" ng-model="user.username" required ng-minlength="0" ng-maxlength="8">
            <p ng-show="userForm.username.$invalid && !userForm.username.$pristine">Username is required.</p>
            <p ng-show="userForm.username.$error.minlength">Username is too short.</p>
            <p ng-show="userForm.username.$error.maxlength">Username is too long.</p>

            <label>Password</label>
            <input type="password" name="password" ng-model="user.password" required ng-minlength="0" ng-maxlength="8">
            <p ng-show="userForm.password.$invalid && !userForm.password.$pristine">Password is required.</p>
            <p ng-show="userForm.password.$error.minlength">Password is too short.</p>
            <p ng-show="userForm.password.$error.maxlength">Password is too long.</p>

            <button type="submit">Submit</button>
    </form>    
    <div ng-view></div>
</body>
</html>

的工作区 enter image description here

Answer 1

将配置块移到mainController定义之外。你的代码应该是：

var validationApp = angular.module('LoginApp', ['ngRoute']);

validationApp.config(['$routeProvider',
    function($routeProvider, $locationProvider) {
        $locationProvider.html5Mode(true).hashPrefix('!');
        $routeProvider.
        when('/AddNewOrder', {
            templateUrl: 'html/dashboard.html',
            controller: 'AddOrderController'
        }).
        otherwise({
            redirectTo: '/AddNewOrder'
        });
    }
]);

validationApp.controller('AddOrderController', function($scope) {
    $scope.message = 'This is Add new order screen';
});

validationApp.controller('ShowOrdersController', function($scope) {
    $scope.message = 'This is Show orders screen';
});

validationApp.controller('mainController', function($scope, $http, $location, $timeout) {

    $scope.submitForm = function($route) {

        if ($scope.userForm.$valid) {

            var update_path = "http://localhost:8080/IPOCCService/rest/UserManager/validate";
            var data1 = angular.toJson($scope.user);
            $http({
                url: update_path,
                method: "POST",
                data: data1
            }).
            success(function(data, status, headers, config) {
                $location.path('/AddNewOrder');
            }).
            error(function(data, status, headers, config) {
                alert("failure");
            });
        } else {
            alert('Please provide missing data..');
        }
    };
});

在控制器内配置应用程序（validationApp.config）没有意义，因为此时应用程序已经初始化，并且您的配置路由未应用。

$ location.path Angular JS无法正常工作

1 个答案: