如何在angularJS中使用stateProvider的stateParams返回的：id答案

【问题标题】：How to make use of :id returned by stateParams of stateProvider in angularJS如何在angularJS中使用stateProvider的stateParams返回的：id
【发布时间】：2013-10-06 12:33:17
【问题描述】：

我希望读取并显示此 JSON 对象数组。

[
{ 
"pictitle":"title1 ", 
"thumbpicurl":"url1",
"bigpicurl":"url2",
"picdescription":"text text" 
}, 
{ 
"pictitle":"title2 ", 
"thumbpicurl":"url1",
"bigpicurl":"url2",
"picdescription":"text text" 
},
]

JSON 由这个工厂提供服务。

angular.module('picService', ['ngResource'])
.factory('picsFactory',function($resource){
  return $resource('pictures.json',{},{
  'getData':  {method:'GET', isArray:true}
  }
  );
});

此标记使用 JSON 数据的 thubmpicURL 显示迷你缩略图。

    <div class="miniImages">
        <a href="/home/{{$index}}">
        <img src="{{pic.thumbpicurl}}" class='thumbnail'/> </a>
    </div>

当用户选择缩略图时，我正在使用 stateProvider 进行路由以显示图片的放大版本。

  $stateProvider.state( 'home/:id', {
    url: '/home/:id',
    views: {
      "main": {
        controller: 'picCtrl',
        templateUrl: 'home/pics-detail.tpl.html'
      }
    } 
    });

第一个控制器返回 JSON 图片数据。

.controller('HomeCtrl', function HomeController( $scope,picsFactory ) {
  picsFactory.getData(function(picturedata){
  $scope.picParams = picturedata;
  });
})

第二个控制器正在寻找设置每个图片对象的属性。我不确定将 stateParams 设置为图片对象的正确语法是什么。

.controller('picCtrl', function picController( $scope, $stateParams ) {
  $scope.picture = $scope.picParams[$stateParams.id];
})
;

我在调试控制台中收到此错误。我认为它不喜欢我在 picCtrl 控制器中的 $scope.picParams[$stateParams.id]。

这是使用 $stateParams 的正确方法吗

TypeError: Cannot read property '0' of undefined

-- 回答：

我修改了 picCtrl 以注入 picsFactory，通过这个更改，它现在看起来可以工作了。

.controller('picCtrl', function picController( $scope, $stateParams, picsFactory ) {
  picsFactory.getData(function(picturedata){
  $scope.picture = picturedata[$stateParams.id];
   });

})
;

【问题讨论】：

你能在 Fiddle/Plunker 中重现它吗？会很棒

标签： json angularjs

【解决方案1】：

原因可能是在您的第二个控制器 picCtrl 初始化之前，getData 对 HomeCtrl 的异步调用可能尚未完成，因此 picParams 为空。

HomeCtrl 也应该是父状态或在 ui-view 的父 html 上声明，以便 picCtrl 能够访问由 HomeCtrl 设置的内容

【讨论】：