私は店舗の場所のリストを表示するためにアプリを開発しています。表示できるイオンアイテムのリストがあります。しかし、私はそれらを選択して、選択された項目に関する詳細を持つ別のビューにリンクさせることはできません。コントローラ/ Services.jsがhrefと連携してテンプレートに行きません
このリンクを含むビューされています。ここでは
<ion-content has-footer="true" has-header="true">
<ion-list has-footer="true" has-header="true" can-swipe="listCanSwipe">
<ion-item detail-push ng-repeat="locale in locations" type="item-text-wrap" onclick = "#/tab/location/{{locale.friendlyName}}">
<h2><b> {{locale.friendlyName}}</b></h2>
<h3>
{{locale.address}}, {{locale.city}}, {{locale.state}}
</h3>
</ion-item>
</ion-list>
</ion-content>
<ion-content>
<ion-footer-bar position="bottom" class="bar-balanced">
<a class = "button icon ion-earth item-center" href="#/tab/map" onclick="mapOn()">Locations Near Me</a>
</ion-footer-bar>
</ion-content>
状態である:
.config(function ($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
// Each tab has its own nav history stack:
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.location', {
url: '/location',
views: {
'tab-location': {
templateUrl: 'templates/tab-location.html',
controller: 'LocCtrl'
}
}
})
.state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
controller: 'AccountCtrl'
}
}
})
.state('tab.map', {
url: '/map',
views: {
'tab-location': {
templateUrl: 'templates/tab-map.html',
controller: 'MapCtrl'
}
}
}
)
.state('tab.detail', {
url: '/location/:locId',
views: {
'tab-location': {
templateUrl: 'templates/location-detail.html',
controller: 'DetCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/location');
})
.directive('hideTabs', function ($rootScope) {
return {
restrict: 'A',
link: function (scope, element, attributes) {
scope.$watch(attributes.hideTabs, function (value) {
$rootScope.hideTabs = value;
});
scope.$on('$ionicView.beforeLeave', function() {
$rootScope.hideTabs = false;
});
}
};
});
、ここでは、コントローラです:
.controller('DetCtrl', function ($scope, $http, $stateParams, Locations) {
Locations.get($stateParams.locId).then(function (result) {
$scope.loc = result;
})
});
私は州のparamsといくつかの切断があると仮定しますが、私は値をチェックして再チェックしました。私は角度とイオンのプラットフォームには比較的新しいので、まだ学習していないプラットフォームの複雑さを逃してしまうかもしれないと心配しています。 私はそれが役立つが、基本的にリストが表示され、スクロール可能な場合は、スクリーンショットを提供することができますが、何も選択することはできません。ここで
は、これに代えて、services.jsあなたイオンアイテムで
angular.module('starter.services', [])
.factory('Locations', function ($http, $q) {
// Might use a resource here that returns a JSON array
var url = "https://portal.mobilequbes.com/api/kiosks?callback=JSON_CALLBACK";
return {
all: function() {
return $http.jsonp(url)
.then(function (result) {
return result.data;
});
},
remove:{
},
get: function (locId) {
for (i = 0; i < Locations.all().length; i++) {
if (Locations.all()[i].friendlyName == locId) {
return Locations.all()[i];
}
}
}
}
return null;
})
私はこれを試しましたが、hrefまたはng-clickを使ってみましたが、項目はまだ応答していません。彼らはどんなクリックが起こっても登録しない。 – Peter
コンソールにエラーが表示されていますか?マップのリンクは機能していますか? –
マップのリンクが正常に動作し、問題のデータにアクセスできません。私はそれが私には慣れていないいくつかの文学的なものだと思うか、またはコントローラとビューがこのように動作する方法についていくつかのコンセプトが欠けています – Peter