ionic/AngularJs在视图之间传输数据



我正在尝试在两个视图之间传输数据。我在http://learn.ionicframework.com/formulas/sharing-data-between-views/但似乎做不好。

本质上,我的app.js是:

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

在friends.html中,我有一个朋友列表,我正试图将id传递给friend-detail.html。以下是friends.html:的内容

<ion-content>
  <ion-list>
    <ion-item class="item-avatar" ng-repeat="friend in friends" ng-href='#/friends/{{friend.id}}'>
      <img ng-src="{{friend.face}}">
      <h2>{{friend.name}}</h2>
    </ion-item>
  </ion-list>
</ion-content>

我正在friend-detail.html中查找friend.idfriend.name。我可以使用friends.html中的{{friend.id}}进行测试,它正在工作,但无法访问新页面。

这是我的清单,以防万一:

.factory('Friends', function() {
  // Might use a resource here that returns a JSON array
  // Some fake testing data
  // Some fake testing data
  var friends = [{
    id: 0,
    name: 'Ben Sparrow',
    notes: 'Enjoys drawing things',
    face: 'https://pbs.twimg.com/profile_images/514549811765211136/9SgAuHeY.png'
  }, {
    id: 1,
    name: 'Max Lynx',
    notes: 'Odd obsession with everything',
    face: 'https://avatars3.githubusercontent.com/u/11214?v=3&s=460'
  }, {
    id: 2,
    name: 'Andrew Jostlen',
    notes: 'Wears a sweet leather Jacket. I'm a bit jealous',
    face: 'https://pbs.twimg.com/profile_images/491274378181488640/Tti0fFVJ.jpeg'
  }, {
    id: 3,
    name: 'Adam Bradleyson',
    notes: 'I think he needs to buy a boat',
    face: 'https://pbs.twimg.com/profile_images/479090794058379264/84TKj_qa.jpeg'
  }, {
    id: 4,
    name: 'Perry Governor',
    notes: 'Just the nicest guy',
    face: 'https://pbs.twimg.com/profile_images/491995398135767040/ie2Z_V6e.jpeg'
  }];

  return {
    all: function() {
      return friends;
    },
    get: function(friendId) {
      // Simple index lookup
      return friends[friendId];
    }
  }
})

这是控制器:

FriendsCtrl:

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

NewTransfersCtrl:

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

请参阅此处的示例:http://codepen.io/aaronksaunders/pen/gbWgQe?editors=101

基本上,您应该检查stateParams.id以获得在URL上传递的id。如果您提供更多的代码,将更容易向您展示缺少的内容。

最新更新