AngularJs location.path 不传递参数答案

【问题标题】：AngularJs location.path not passing parametersAngularJs location.path 不传递参数
【发布时间】：2015-10-14 22:20:17
【问题描述】：

我有登录页面。

Login.html

<ion-view view-title="Login" name="login-view">
  <ion-content class="padding">
      <div class="list list-inset">
          <label class="item item-input">
              <input type="text" placeholder="Username" ng-model="data.username">
          </label>
          <label class="item item-input">
              <input type="password" placeholder="Password" ng-model="data.password">
          </label>
      </div>
      <button class="button button-block button-calm" ng-click="login()">Login</button>
  </ion-content>
</ion-view>

当我点击登录按钮时login() 方法在下面起作用

LoginCtrl 控制器。

.controller('LoginCtrl', function ($scope, LoginService, $ionicPopup, $state, $location, $http) {
  $scope.login = function () {
    $http({
      method: 'GET',
      url: 'http://localhost:49431/api/values/GetUserInfo?username=' + $scope.data.username + '&password=' + $scope.data.password + ''
    }).then(function successCallback(response) {
      if (response.data.Status == true) { // Success
        $location.path('/HomePage/').search({ id: '1' }); // Problem here
      } else { // Fail
        var alertPopup = $ionicPopup.alert({
          title: 'Login failed!',
          template: 'Username or password is incorrect!'
        });
        $scope.data.username = "";
        $scope.data.password = "";
      }
    }, function errorCallback(response) {
      alert("error");
    });
  }
})

我用

$location.path('/HomePage/').search({ id: '1' });

为了将 id 参数传递给 HomePage.Html 页面的代码。但是位置路径传递参数和重定向页面都没有。很快，位置路径不起作用。

HomePageCtrl 控制器

.controller('HomePageCtrl', function ($scope, HomePageService, $state, $location, $cordovaCamera, $stateParams, $routeParams) {
    alert($routeParams.id + $stateParams.id);
}

app.js

.config(function ($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('HomePage', {
      url: '/HomePage',
      templateUrl: 'templates/HomePage.html',
      controller: 'HomePageCtrl'
    })
    .state('login', {
      url: '/login',
      templateUrl: 'templates/Login.html',
      controller: 'LoginCtrl'
    });
  $urlRouterProvider.otherwise('/login');
});

问题：

如何使用$location.path 将参数从 LoginCtrl 控制器传递给 HomePageCtrl 控制器？

任何帮助将不胜感激。

谢谢。

【问题讨论】：

$location.path() 不加载新页面。浏览器中的 URL 是否正在更新，或者对 $location.path 的调用似乎被完全忽略了？

标签： javascript angularjs ionic-framework

【解决方案1】：

为什么不使用 $state 而不是 $location

App.js：

 .state('HomePage', {
             url: '/HomePage/:id',
             templateUrl: 'templates/HomePage.html',
             controller: 'HomePageCtrl'
  })

登录控制：

.controller('LoginCtrl', function ($scope, LoginService, $ionicPopup, $state, $location, $http) {

           $scope.login = function () {

            $http({
                method: 'GET',
                url: 'http://localhost:49431/api/values/GetUserInfo?username=' + $scope.data.username + '&password=' + $scope.data.password + ''
            }).then(function successCallback(response) {

                if (response.data.Status == true) { // Success

                    $state.go('HomePage',{id:'1'})

                }
                else { // Fail
                    var alertPopup = $ionicPopup.alert({
                        title: 'Login failed!',
                        template: 'Username or password is incorrect!'
                    });

                    $scope.data.username = "";
                    $scope.data.password = "";
                }

            }, function errorCallback(response) {
                alert("error");
            });
    }
    })

HomeCtrl：

.controller('HomePageCtrl', function ($scope, HomePageService, $state, $location, $cordovaCamera, $stateParams, $routeParams) {

    alert($stateParams.id);
}

【讨论】：

【解决方案2】：

我没有用location.path尝试过，但一般你需要在$stateProvider的url定义中指定参数：

$stateProvider
 .state('HomePage', {
     url: '/HomePage',
     templateUrl: 'templates/HomePage.html',
     controller: 'HomePageCtrl'
 })
 .state('login', {
     url: '/login/:userid/:password',
     templateUrl: 'templates/Login.html',
     controller: 'LoginCtrl'
 })

您可以在控制器中使用$stateParams.userid 访问这些参数...

【讨论】：