$ location.path Angular JS不能正常工作

问题描述：

我是Angular JS的新手，在路由上尝试hello world。

我正在用户名和密码从用户和调用休息服务进行验证，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

答

移动配置块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），因为此时应用程序已经初始化，配置，不应用途径。

嘿dfsq ...谢谢...它现在正在工作。我浪费了我的一整天在这.. – Jayesh 2014-09-25 14:18:33

很高兴我可以帮助！ – dfsq 2014-09-25 14:21:45

现在当我运行我的应用程序像http：// ip：8080/IPOCCApp它重定向到http：// ip：8080/IPOCCApp /＃/ AddNewOrder。我是否需要将默认网址添加到“/”或删除“否则”。什么是正确的方式。 – Jayesh 2014-09-25 14:22:06

$ location.path Angular JS不能正常工作

相关推荐