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

时间:2016-01-04 19:13:27

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

我正在使用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');
    }
  };
}])

目前我有返回网址users/4/.json硬编码。我能以某种方式获得用户ID吗?或者我必须在StateProvider中解决它吗?

2 个答案:

答案 0 :(得分:1)

您可以在州内添加<?php class Object { private static $data; public static function set($name) { // ... some other code stuff } private static function fc($num) { // some wicked code here } public static function green($num) { self::$data .= self::fc($num*10); return new static; } public static function red($num) { self::$data .= self::fc($num*25); return new static; } public static function blue($num) { self::$data .= self::fc($num*1); return new static; } // how to get this baby to fire ? public static function insert() { // inserting file_put_content('test_code.txt', self::$data); } } //$tss = new object('index_elements'); $Object::set('index_elements')->blue(100)->green(200)->red(100)->insert(); // chain 1 $Object::set('index_elements')->green(0)->red(100)->blue(0)->insert(); // chain 2 $Object::set('index_elements')->blue(10)->red(80)->blue(10)->green(0)->insert(); // chain 3 ?> 用户参数,以便可以从id轻松读取。

$stateParams

因此,在创建ajax时,您可以在创建ajax之前直接从用户对象获取用户url: '/{id}/{name}', //assuming user object has `id` property which has unique id.

<强>控制器

id

<强>工厂

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

答案 1 :(得分:1)

你说对了 - 你应该在控制器加载之前解决它:

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