javascript - ionic ui-router 解析的结果没有显示在页面中

Question

这是代码

APP.js

.state('app.aboutus', {
  url: '/aboutus',
  views: {
    'mainContent': {
      templateUrl: 'templates/aboutus.html',
      controller: 'AboutController',
        resolve: {
            leaders:  ['corporateFactory', function(corporateFactory){
                return corporateFactory.query();
          }]

        }
    }
  }
})

Controller.js

.controller('AboutController', ['$scope', 'leaders', 'baseURL', function($scope, leaders, baseURL) {

                $scope.baseURL = baseURL;
                $scope.showLeaders = false;
                $scope.message="Loading ...";

                $scope.leaders = leaders;

                console.log($scope.leaders);

                }])

Aboutus.html

<ion-view view-title="About Us">
  <ion-content>
      <div class="card">
            <div class="list list-inset">
                <div ng-repeat="leaders in leadership" class="item item-avatar item-text-wrap">
                    <h2>{{leaders.name}}</h2>
                    <h4>{{leaders.designation}}</h4>
                </div>
            </div>
      </div>
  </ion-content>
</ion-view>

db.json

"leadership": [
    {
      "id": 0,
      "name": "Human 1",
      "designation": "Chief Executive Officer"
    },
    {
      "id": 1,
      "name": "Human 2",
      "designation": "Chief Food Officer"
    },
    {
      "id": 2,
      "name": "Human 3",
      "designation": "Chief Taste Officer"
    },
    {
      "id": 3,
      "name": "Human 4",
      "designation": "Executive Chef"
    }
  ]

当我在 Google Chrome 中使用检查元素 - 控制台选项卡进行检查时，$resolved: 已成功从 false 更改为 true，并且每个数组都包含每个 ID 的信息。

但是，数据没有显示在aboutus.html中

我是不是写错了什么？或者也许我使用了错误的方法？

提前谢谢您!

Answer 1

您的问题可能是您的 ng-repeat 语法不正确。如果您拥有领导权，那么它应该是您在范围内引用的对象/数组。所以尝试将其更改为:

<div ng-repeat="leader in leaders" class="item item-avatar item-text-wrap">
     <h2>{{leader.name}}</h2>
     <h4>{{leader.designation}}</h4>
</div>