带有外部 JSON 文件的 Ionic 框架

Question

我有一个不知道如何解决的问题，我有一个 IONIC 选项卡模板，并希望添加一个外部 JSON 文件来显示，而不是默认显示的模板好友列表。

这是我的 app.js 文件

.state('tab.friends', {
      url: '/friends',
      views: {
        'tab-friends': {
          templateUrl: 'templates/tab-friends.html',
          controller: 'FriendsCtrl'
        }
      }
    })
    .state('tab.friend-detail', {
      url: '/friends/:friendId',
      views: {
        'tab-friends': {
          templateUrl: 'templates/friend-detail.html',
          controller: 'FriendDetailCtrl'
        }
      }
    })

这是我的 controllers.js 文件

.controller('FriendsCtrl', function($scope, Friends) {
  $scope.friends = Friends.all();
})

.controller('FriendDetailCtrl', function($scope, $stateParams, Friends) {
  $scope.friend = Friends.get($stateParams.friendId);
})

这是我的 services.js 文件，用于访问 JSON 文件：

.factory('Friends', function($http) {
var friends = [];
  return {
    all: function(){
      return $http.get("http://yanupla.com/apps/ligajaguares/equipos.json").then(function(response){
        friends = response.data;
        console.log(friends);
        return friends;
      });
    },
    get: function(friendId) {
       for (var i = 0; i < friends.length; i++) {
        if (friends[i].id === parseInt(friendId)) {
          return friends[i];
        }
      }
      return null;
    }
  }
});

最后是我的 tabs-friends.hm 模板：

<ion-view view-title="Friends">
  <ion-content>
    <ion-list>
      <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="friend in friends" type="item-text-wrap" href="#/tab/friends/{{friend.id}}">
        <!--img ng-src="{{chat.face}}"-->
        <h2>{{friend.name}}</h2>
        <p>{{friend.bio}}</p>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

我可以使用 console.log 在浏览器中看到 JSON 文件对象，但我在模板正文中看不到任何其他内容，只有“朋友”标题。

这里缺少什么？

Answer 1

我猜 Angular 正在访问 $scope.friends，而它仍然是一个承诺。您是否尝试过使用 .state-definition 中的 resolve 语句来解析变量？

app.js 应该如下所示：

.state('tab.friends', {
  url: '/friends',
  views: {
    'tab-friends': {
      templateUrl: 'templates/tab-friends.html',
      controller: 'FriendsCtrl',
      resolve: {
        allfriends: function(Friends) {
          return Friends.all(); }
      }
    }
  }
})

控制器将是：

.controller('FriendsCtrl', function($scope, allfriends) {
  $scope.friends = allfriends;
})

我认为您需要使用 $q 来正确解析，因此服务需要如下所示：

.factory('Friends', function($http, $q) {
var friends = [];
  return {
    all: function(){
      var dfd = $q.defer();
      $http.get("http://yanupla.com/apps/ligajaguares/equipos.json").then(function(response){
        friends = response.data;
        console.log(friends);
        dfd.resolve(friends);
      });
      return dfd.promise;
    },
    get: function(friendId) {
       for (var i = 0; i < friends.length; i++) {
        if (friends[i].id === parseInt(friendId)) {
          return friends[i];
        }
      }
      return null;
    }
  }
});

有关这方面的更多信息，我建议从 ionic 阅读这个公式：http://learn.ionicframework.com/formulas/data-the-right-way/

此外，这对我理解承诺的概念有很大帮助： http://andyshora.com/promises-angularjs-explained-as-cartoon.html