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

时间:2015-03-22 00:17:22

标签: angularjs ionic

我试图在两个视图之间传输数据。我按照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);
})

1 个答案:

答案 0 :(得分:0)

请在此处查看示例:http://codepen.io/aaronksaunders/pen/gbWgQe?editors=101

基本上你应该检查stateParams.id以获取在URL上传递的id。如果您提供了更多代码,那么向您展示哪些内容会更容易。