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

我猜这个角度正在访问$ 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

具有外部JSON文件的离子框架

1 个答案: