無法在Angular中檢索給定ID的參數

Question

Im在Ionic中構建應用程序，我需要從列表中顯示幾個細節。基本上，我有一個顯示從JSON文件中的所有我的內容一個主頁，並把它變成一個列表

home.html的

<ion-view view-title="Home"> 
    <ion-content> 
    <ion-list> 
     <ion-item ng-repeat="item in items" ui-sref="item({itemId:item.id})"> 
      <div class='card'> 
      <div class="item item-divider"> 
       {{item.title}} 
      </div> 
      <div class="item item-text-wrap"> 
       {{item.text}} 
      </div> 
      <div class="item item-divider"> 
       {{item.id}} 
      </div> 
      </div> 
     </ion-item> 
    </ion-list> 


    </ion-content> 
</ion-view> 

控制器來顯示home.html的

//factory to get data from data.json 

.factory('myFactory', function($http) { 
return $http.get('data.json'); 
}) 

//Controller home display the whole list 

.controller('HomeCtrl', function($ionicModal, $scope, myFactory) { 

myFactory.then(function(response) { 
$scope.items = response.data; 
/*console.log(response)*/ 
}); 

所有項目

當我點擊列表中的一個元素時，我想要被重定向到匹配的id的具體內容：

item.html

<ion-view view-title="Module"> 
<ion-content class="has-header"> 
    <h1>{{$stateParams.itemId}} (doesn't work)</h1> 
    <p> 
    <!-- content information from given id... --> 
    </p> 
</ion-content> 
</ion-view> 

控制器單項

.controller('ItemCtrl', function($stateParams) { 
console.log($stateParams.itemId); 
}) 

但在我的HTML我甚至無法顯示URL中的選擇的ID！並且無法從該ID中檢索任何元素......我現在很迷茫！ 我已經看到關於state.go與給定的參數，但那不是我想要做的。我試着分配不同的變量，但無法弄清楚。

我的JSON文件看起來像這樣：

[ 
{ "title": "Emploi du temps", "text": "text", "id": 1, "content": "text" }, 
{ "title": "Agenda/bons plans", "text": "text", "id": 2, "content": "text"}, 
{ "title": "Transport", "text": "text", "id": 3, "content": "text" }, 
{ "title": "Sécurité", "text": "text", "id": 4, "content": "text" } 
] 

的狀態如下：

//States 

.config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider 

    .state('home', { 
    url: '/home', 
    templateUrl: 'templates/home.html', 
    controller: 'HomeCtrl' 
    }) 

    .state('item', { 
    url: '/home/:itemId', 
    templateUrl: 'templates/item.html', 
    controller: 'ItemCtrl' 
    }) 

我花了幾天就這個問題和我已經閱讀了很多關於類似的問題，但我似乎無法讓它工作...就像我想念整個事情。我希望我能做到這一點在PHP中，我們做的方式（類似於得到*從*其中id = *） 請幫幫忙，謝謝:)

Answer 1

在你的代碼中有一個錯誤 -

Actually $stateParams object can not synchronized with our view. 
So don't use this for views. 

**Solution-** 

我們可以使用$ scope併爲其添加一個屬性，即itemId。 $ scop能夠與UI（視圖）進行交互。

item.html：

<ion-view view-title="Module"> 
<ion-content class="has-header"> 
    <h1>{{$scope.itemId}}</h1> 
    <p> 
    <!-- content information from given id... --> 
    </p> 
</ion-content> 
</ion-view> 

控制器單項：

.controller('ItemCtrl', function($stateParams) { 
    $scope.itemId = $stateParams.itemId; 
})