我目前正在使用Cordova和Ionic / Angular构建iOS应用。基本上，有JSON文件，其中包含有关各种兴趣点（即餐馆，酒吧等）的数据。
然后使用服务将数据解析到控制器中。然后在列表视图中使用它，每个地方都有一个项目。同时，数据也被绘制到Google Map上（使用JavaScript API）。但是，我在尝试为每个地方创建详细视图时遇到一些困难。每个列表视图项都需要分别链接到每个地方的视图。
我目前尝试了一些解决方案，目前我的代码如下。
国家（我只包括相关的内容）：
.state('tabs.findaplace', {
url: '/find-a-place',
views: {
'findaplace-tab': {
templateUrl: 'views/find-a-place.html',
controller: 'FindAPlaceCtrl',
resolve: {
allplaces: function(Places) {
return Places.all(); }
}
}
}
})
.state('tabs.place-detail', {
url: '/place/:placeId',
views: {
'findaplace-tab': {
templateUrl: 'views/place-detail.html',
controller: 'PlaceDetailCtrl',
resolve: {
allplaces: function($stateParams, Places) {
return Places.all($stateParams.placeId); }
}
}
}
})
控制器：
.controller('FindAPlaceCtrl', function($scope, $ionicLoading, $ionicPopover, $ionicPopup, IonicClosePopupService, $compile, $http, allplaces) {
// Pull in Places data parsed through the function in services.js
$scope.places = allplaces;
...
})
.controller('PlaceDetailCtrl', function($scope, place) {
$scope.place = place;
})
服务/工厂：
.factory('Places', function($http, $q) {
var places = [];
return {
all: function(){
var dfd = $q.defer();
$http.get('../data/places.json').then(function(response){
places = response.data;
//console.log(places);
dfd.resolve(places);
});
return dfd.promise;
},
get: function(placeId) {
for (var i = 0; i < places.length; i++) {
if (places[i].id === parseInt(placeId)) {
return places[i];
}
}
return null;
}
}
});
列表视图标记（在find-a-place.html中）：
<ion-item class="list-item" ng-repeat="place in places" ui-sref="place({ placeId: place.id })">
<img ng-src="{{ place.images.image1 }}" alt="{{ place.title }}" />
<span class="favourite-icon"></span>
<div class="list-details">
<p class="sub-heading">{{ place.title }}</p>
<p>{{ place.type }}</p>
<p>{{ place.location }}</p>
</div>
</ion-item>
数据正确显示在“查找地点”中。选项卡，在地图上和列表视图中。
但是，当我单击列表视图项时，控制台中会出现以下错误： 错误：无法解决＆＃39;地点＆＃39;来自州＆tab; findaplace＆＃39;
供参考： 工厂等的代码来自stackoverflow上的这篇文章：Ionic Framework with External JSON File
虽然目前的解决方案基于：http://learn.ionicframework.com/formulas/sharing-data-between-views/
感谢任何帮助！
答案 0 :(得分：0)
这是一个工作片段：
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: '/tab',
abstract: true,
templateUrl: 'views/tabs.html'
})
.state('tabs.findaplace', {
url: '/find-a-place',
views: {
'findaplace-tab': {
templateUrl: 'views/find-a-place.html',
controller: 'FindAPlaceCtrl',
resolve: {
allplaces: function(Places) {
console.log("resolve allplaces");
return Places.all();
}
}
}
}
})
.state('tabs.place-detail', {
url: '/place/:placeId',
views: {
'place-detail-tab': {
templateUrl: 'views/place-detail.html',
controller: 'PlaceDetailCtrl',
resolve: {
place: function($stateParams, Places) {
return Places.get($stateParams.placeId);
}
}
}
}
});
$urlRouterProvider.otherwise("/tab/find-a-place");
})
.controller('FindAPlaceCtrl', function($scope, $ionicLoading, $ionicPopover, $ionicPopup, $compile, $http, allplaces) {
// Pull in Places data parsed through the function in services.js
console.log("FindAPlaceCtrl");
$scope.places = allplaces;
})
.controller('PlaceDetailCtrl', function($scope, place) {
$scope.place = place;
console.log("PlaceDetailCtrl");
})
.factory('Places', function($http, $q, $timeout) {
var places = [];
return {
all: function(){
var dfd = $q.defer();
//$http.get('../data/places.json').then(function(response){
$timeout(function() {
//places = response.data;
places = [{
"id": "0",
"title": "Aquila",
"category": "Restaurant",
"type": "Italian Restaurant",
"location": "City Centre, Bristol",
"distance": "0.4",
"price": "4",
"rating": "../img/rating-4point5.svg",
"description": "We are a modern Italian restaurant bringing the very best of traditional dishes from the regions of Italy to Bristol city centre. The sleek design of the restaurant is complimented by the service given by our front of house team led by General Manager Andrea Pintore. Our central location on Baldwin Street gives great views.",
"menu": "",
"address": "30-34 Baldwin Street, Bristol, BS1 1NR",
"latitude": "51.453149",
"longitude": "-2.594549",
"marker": "../img/marker-restaurant.svg",
"phone": "0117 321 0322",
"website": "http://www.aquila-restaurant.com/",
"opening": "10:00 - 23:00",
"images": {
"image1": "../img/aquila-1.png",
"image2": "../img/aquila-2.png",
"image3": "../img/aquila-3.png",
"image4": "../img/aquila-4.png"
}
}, {
"id": "1",
"title": "Colston Hall",
"category": "Entertainment",
"type": "Concert Hall",
"location": "City Centre, Bristol",
"distance": "0.4",
"price": "3",
"rating": "../img/rating-4.svg",
"description": "Colston Hall is Bristol’s largest concert hall, presenting concerts and entertainment by major names in rock, pop, jazz, folk, world and classical music, stand up comedy and light entertainment, as well as local choirs, orchestras and schools.",
"menu": "",
"address": "Colston St, Bristol, BS1 5AR",
"latitude": "51.454785",
"longitude": "-2.598254",
"marker": "../img/marker-entertainment.svg",
"phone": "0844 887 1500",
"website": "http://www.colstonhall.org/",
"opening": "10:00 – 18:00",
"images": {
"image1": "../img/colstonhall-1.png",
"image2": "../img/colstonhall-2.png",
"image3": "../img/colstonhall-3.png"
}
}];
//console.log(places);
dfd.resolve(places);
console.log("places.all");
});
return dfd.promise;
},
get: function(placeId) {
for (var i = 0; i < places.length; i++) {
if (places[i].id === placeId) {
return places[i];
}
}
return null;
}
}
});<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic detail view with external JSON file</title>
<link href="http://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script>
</head>
<body>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="views/tabs.html" type="text/ng-template">
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<ion-tab title="findaplace" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/find-a-place">
<ion-nav-view name="findaplace-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="place-detail" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/place">
<ion-nav-view name="place-detail-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="views/find-a-place.html" type="text/ng-template">
<ion-view title="findaplace">
<ion-content>
<ion-item class="list-item" ng-repeat="place in places" ui-sref="tabs.place-detail({ placeId: place.id })">
<img ng-src="{{ place.images.image1 }}" alt="{{ place.title }}" />
<span class="favourite-icon"></span>
<div class="list-details">
<p class="sub-heading">{{ place.title }}</p>
<p>{{ place.type }}</p>
<p>{{ place.location }}</p>
</div>
</ion-item>
</ion-content>
</ion-view>
</script>
<script id="views/place-detail.html" type="text/ng-template">
<ion-view title="place-detail">
<ion-content>
<h3>tab-place-detail</h3>
<ion-item class="list-item">
<img ng-src="{{ place.images.image1 }}" alt="{{ place.title }}" />
<span class="favourite-icon"></span>
<div class="list-details">
<p class="sub-heading">{{ place.title }}</p>
<p>{{ place.type }}</p>
<p>{{ place.location }}</p>
</div>
</ion-item>
</ion-content>
</ion-view>
</script>
</body>
</html>