我正在寻找并显示这个 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];
});
})
;