如何使用：由stateProvider的stateParams在angularJS中返回的ID

期待閱讀&顯示此JSON數組對象。如何使用：由stateProvider的stateParams在angularJS中返回的ID

[ 
{ 
"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]; 
}) 
;

我在故障控制檯中出現此錯誤。我認爲它不喜歡我的$ scope.picParams [$ stateParams.id]在picCtrl控制器中。

這是使$ 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]; 
    }); 

}) 
;

來源

2013-10-06 Arvind TM

設置是否可以重現，在小提琴/ Plunker？會很棒 –

這樣做的原因可能是你的第二個控制器picCtrl被初始化，因此picParams爲空之前的getData上HomeCtrl異步調用可能是不完整的。

而且HomeCtrl應該是父狀態或對ui-view爲picCtrl父HTML宣佈要能夠訪問哪些已被HomeCtrl

來源

2013-10-06 13:22:46 Chandermani

如何使用：由stateProvider的stateParams在angularJS中返回的ID

回答

相關問題