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

Question

我正在使用 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。

因此，当单击 link .profile 时，我会转到 url 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');
    }
  };
}])

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

Answer 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');
    }
  };
}])

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

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

Pass object through ui-router to controller

angularjs

routing

angular-ui-router

angularjs-routing