我正在尝试在两个视图之间传输数据。我在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.id
或friend.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。如果您提供更多的代码,将更容易向您展示缺少的内容。