无法在Angular中检索给定ID的参数

Question

我在 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 中那样做（类似于 get * from * where id = *） 请帮忙，谢谢:)

Answer 1

在你的代码中有一个错误 -

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

**Solution-**

我们可以使用 $scope 并为其附加一个属性，即 itemId。 $scop 能够与 UI(view) 进行交互。

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;
 })