外部JSON文件的离子详细视图 [英] Ionic detail view with external JSON file
本文介绍了外部JSON文件的离子详细视图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我目前正在使用Cordova和Ionic / Angular建立一个iOS应用程式。基本上，存在关于各种感兴趣的地方（即，餐馆，酒吧等）的数据的JSON文件。
然后，使用服务将数据解析并且进入控制器。然后在列表视图中使用它，每个地方都有一个项目。虽然数据也被绘制在Google地图上（使用JavaScript API）。但是，我在尝试创建每个地方的详细信息视图有一些困难。每个列表视图项目需要分别链接到每个地方的视图。
我目前已经尝试过几个解决方案，我现在的代码如下。 p>
州（我只包括相关的）：
.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）;}
}
}
}
}）
控制器 p>
.controller（'FindAPlaceCtrl'，函数（$范围，$ ionicLoading，$ ionicPopover，$ ionicPopup，IonicClosePopupService，$编译，$ HTTP ，allplaces）{
//拉入通过services.js中的函数解析的Places数据
$ 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'）。 {
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-itemng-repeat =place in placesui-sref = place（{placeId：place.id}）>
< img ng-src ={{place.images.image1}}alt ={{place.title}}/>
< span class =favorite-icon>< / span>
< div class =list-details>
< p class =sub-heading> {{place.title}}< / p>
< p> {{place.type}}< / p>
< p> {{place.location}}< / p>
< / div>
< / ion-item>
数据正确显示在查找地方标签中，无论是在地图上还是列表视图。
但是，当我单击列表视图项目时，以下错误出现在控制台：
错误：无法解析'places' 'tabs.findaplace'
FYI：
工厂等的代码来源于stackoverflow上的这篇文章： Ionic Framework与外部JSON文件
基于： http://learn.ionicframework.com/formulas/sharing-data -between-views /
感谢任何帮助。
解决方案
以下是一个有效的代码段：
angular.module（'ionicApp'，['ionic']）。 $ stateProvider，$ urlRouterProvider）{$ stateProvider .STATE（'标签'，{URL：/标签，摘要：真实，templateUrl：意见/ tabs.html'}）.STATE（'tabs.findaplace'，{网址：'/ find-a-place'，views：{'findaplace-tab'：{templateUrl：'views / find-a-place.html'，controller：'FindAPlaceCtrl'，resolve：{allplaces：function 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（/标签/找到-A-地方）;}）控制器（'FindAPlaceCtrl'，函数（$范围，$ ionicLoading，$ ionicPopover，$ ionicPopup，$编译，$ HTTP，allplaces）{/ /拉入通过services.js中的函数解析的Places数据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：意大利餐厅，location：City Centre，Bristol 0.4，price：4，rating：../img/rating-4point5.svg，description：我们是一家现代意大利餐厅，的意大利到布里斯托尔市中心。餐厅的时尚设计由总经理Andrea Pintore领导的房前团队提供的服务表示赞赏。 ，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 Center，Bristol，distance：0.4，price：3 rating：../img/rating-4.svg，description：Colston Hall是布里斯托尔最大的音乐厅，以摇滚，流行，爵士，民间，世界和古典音乐，菜单：，地址：Colston St，Bristol，BS1 5AR，纬度：51.454785，经度：-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 =viewportcontent =initial-scale = 1，maximum-scale = 1，user-scalable = no，width = device-width> < title>含有外部JSON文件的离子详细信息视图< / title> < link href =http://code.ionicframework.com/nightly/css/ionic.min.css =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-bar> < ion-nav-view>< / ion-nav-view> < script id =views / tabs.htmltype =text / ng-template> < ion-tabs class =tabs-icon-top tabs-color-active-positive> < ion-tab title =findaplaceicon-off =ion-ios-pulseicon-on =ion-ios-pulse-stronghref =＃/ tab / find-a-place> < ion-nav-view name =findaplace-tab>< / ion-nav-view> < / ion-tab> < ion-tab title =place-detailicon-off =ion-ios-pulseicon-on =ion-ios-pulse-stronghref =＃/ tab / place> < ion-nav-view name =place-detail-tab>< / ion-nav-view> < / ion-tab> < / ion-tabs> < / script> < script id =views / find-a-place.htmltype =text / ng-template> < ion-view title =findaplace> <离子含量> < ion-item class =list-itemng-repeat =place in placesui-sref =tabs.place-detail（{placeId：place.id}）> < imgng-src ={{place.images.image1}}alt ={{place.title}}/> < span class =favorite-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.htmltype =text / ng-template> < ion-view title =place-detail> <离子含量> < h3> tab-place-detail< / h3> < ion-item class =list-item> < imgng-src ={{place.images.image1}}alt ={{place.title}}/> < span class =favorite-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>
I'm currently building an iOS app using Cordova and Ionic/Angular. Essentially, there is JSON file which holds data regarding various places of interest (i.e. restaurants, bars etc).
The data is then being parsed using a service and into a controller. Then it is used within a list view, with an item for each place. Whilst the data is also being plotted onto a Google Map (using the JavaScript API). However, I'm having a few difficulties in trying to create the detail view for each place. Each list view item needs to link to a view for each place respectively.
I currently have tried a few solutions, the code I have at the moment is below.
States (I've only included the relevant ones):
.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); }
}
}
}
})
Controllers:
.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;
})
Service/Factory:
.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;
}
}
});
List View Markup (Within 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>
The data is appearing correctly in the 'Find A Place' tab, both on the map and within the list view.
However, when I click on a list view item the following error appears in the console: Error: Could not resolve 'places' from state 'tabs.findaplace'
FYI: The code for the factory etc was sourced from this post on stackoverflow: Ionic Framework with External JSON File
Whilst the current solution was based on: http://learn.ionicframework.com/formulas/sharing-data-between-views/
Any help is appreciated!
解决方案
Here is a working snippet:
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>
这篇关于外部JSON文件的离子详细视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
