通过 ui-router 将对象传递给控制器答案

【问题标题】：Pass object through ui-router to controller通过 ui-router 将对象传递给控制器
【发布时间】：2016-04-08 11:31:20
【问题描述】：

我正在使用 angular/rails 创建用户个人资料页面。我已经使用 ui-router 设置了一个 StateProvider，就像这样，

$stateProvider
  .state('friendprofile', {
    url: '/{name}',
    views: {
      "friendProfile": {
        templateUrl: '../assets/angular-app/templates/_friendProfile.html',
        controller: 'friendProfileCtrl',
      }
    },
  })

这是来自模板的点击动作，

%a.profile{"ui-sref" => "friendprofile(user)"}
  name: {{ user.name }}

请注意，我在这里传递了user。

所以当点击链接.profile 时，我会转到网址http://localhost:3000/#/Jan%20Jansen。所以这工作正常。

在我的friendProfileCtrl 中，我有一个调用服务的函数，

friendProfileService.loadProfile().then(function(response) {
  $scope.user_profile = response.data;
  console.log ($scope.user_profile)
})

调用此服务，

app.factory('friendProfileService', ['$http', function($http) {
  return {
    loadProfile: function() {
      return $http.get('/users/4.json');
    }
  };
}])

目前我有返回 url users/4/.json 硬编码。我可以以某种方式获取用户ID吗？还是必须在 StateProvider 中解决？

【问题讨论】：

标签： angularjs routing angular-ui-router angularjs-routing

【解决方案1】：

您可以在状态中添加用户的id 参数，以便可以从$stateParams 轻松读取它。

url: '/{id}/{name}', //assuming user object has `id` property which has unique id.

因此，在制作 ajax 时，您可以在制作 ajax 之前直接从用户对象中获取用户 id。

控制器

friendProfileService.loadProfile($stateParams.id).then(function(response) {
  $scope.user_profile = response.data;
  console.log ($scope.user_profile)
})

工厂

app.factory('friendProfileService', ['$http', '$stateParams', function($http) {
  return {
    loadProfile: function(id) {
      return $http.get('/users/'+ id +'json');
    }
  };
}])

【讨论】：

谢谢。我不知道你可以通过$stateParams。看起来它正在工作。
@PeterBoomsma 太好了..很高兴能帮助你..谢谢:)

【解决方案2】：

你说得对——你应该在控制器加载之前解决它：

$stateProvider
  .state('friendprofile', {
    url: '/{name}',
    views: {
      "friendProfile": {
        templateUrl: '../assets/angular-app/templates/_friendProfile.html',
        controller: 'friendProfileCtrl',
      }
    },
    resolve: {
      user: function($stateParams, friendProfileService) {
        friendProfileService.loadProfile($stateParams.name);
      }
    }
  })

然后您可以在控制器中注入 user 变量，这不是一个承诺，而是已经解析的数据：

app.controller('friendProfileCtrl', [
  '$scope',
  'user',
  ...
  function($scope, user, ...) {
    $scope.user_profile = user;
    console.log($scope.user_profile)
  }
]);

顺便说一句，ui-sref 的值应该是这样的：friendprofile({name: user})

并且不要忘记将输入参数添加到loadProfile 函数。可能您最好将{name} 参数重命名为{id}

【讨论】：