この問題で 1 週間立ち往生しており、「ui-router」と「ionic's」のビュー ルーティングを理解したように感じますが、そうではないようです。
ビューがどのように機能するかの例を数多く見てきましたが、ビルドが大きくなったため、私のプロジェクトにはサイド メニュー、タブ、および各タブ コンテンツの両方のビューがあるため、見た例はプロジェクトにとって単純すぎます。
私の問題:
タブ内に異なるコントローラーを持つ複数のビューを保持しています。私は、リーフレット マップと、自分の場所が入力されるドロップ ダウン リストを使用しており、両方を機能させることができました。ただし、ビューは奇妙な呼び出しを行っています。リーフレット マップを選択するたびに、私discover-home.htmlのアプリの下にある [リストの発見] ボタン ( 内)が押されます。さらに、このリスト ビューがマップとズーム アイコンの間にあることがわかります。マップに触れずにタブを切り替えて戻ってくると、リストを再度開くことができません。ion-nav-barmenu.html
私の問題を理解するために私が尋ねる必要がある質問は
1. マルチビュー アプリケーションで ionic のビュー ナビゲーションを使用してナビゲートする正しい方法は何ですか?
2. ビューを変更すると、他のコントローラーの再呼び出しが無効になるのはなぜですか?
3. ベスト プラクティスにはどのようなものがありますか?
これは私が扱っているものです。どんな助けでも大歓迎です。
discover-home.html内の私のタブ ビュー
menu.html内のサイドバー ビュー
discover-home.html内のリスト表示
menu.htmlのion-nav-bar の下に隠されている、 discover-home.html の発見リスト
ここに私のコードスニペットがあります
index.html
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
Discover-tabs-controller.html
これは、タブ ビューを制御します (そのうちの 1 つは、discover-home.html です)。
<ion-view>
<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
<ion-tabs class="tabs-positive tabs-icon-only" >
<ion-content has-subheader="true"></ion-content>
<!--HOME TAB [OPEN]-->
<ion-tab title="Discover" icon-on="icon ion-home" icon-off="icon ion-home"
href="#/app/discover/home">
<ion-nav-view cache-view="true" name="home-tab"></ion-nav-view>
<!-- View For Home.html -->
</ion-tab>
<!--HOME TAB [CLOSED]-->
<!--MORE TABS HERE-->
</ion-content>
</ion-tabs>
</div>
</ion-view>
Discover-home.html
<ion-view view-title="Home">
<!--SUBHEADER BUTTON: DISPLAY LISTVIEW -->
<div ng-controller="FrostCtrl" class="bar bar-subheader button bar-balanced" ng-click="pushFrost()">
<h2 class="title">{{title}} List</h2>
</div>
<!--DISPLAY OVERLAY WITH LIST-->
<ion-pane ng-controller="OverlayCtrl" class="dark-overlay" ng-show="showOverlay">
<ion-content class="has-subheader">
<button class="button button-block button-outline button-balanced" ng-click="hideFrost()">Dismiss
</button>
<ion-list>
<ion-item ng-repeat="item in items" class="dark-item">
{{item.text}}
</ion-item>
</ion-list>
</ion-content>
</ion-pane>
<!--LEAFLET MAP -->
<leaflet class="has-subheader padding"center="nassau" paths="paths" tiles="tiles" markers="markers" defaults="defaults">
</leaflet>
</ion-view>
controller.js
angular.module('starter.controllers', [])
...
// #######| LEAFLET MAP |#######
.controller('ActivityCntl', [ '$scope', 'leafletData', function($scope, leafletData) {
var tileSource = {
onlineTiles: {
url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
},
};
angular.extend($scope, {
nassau: {
lat: 25.074521,
lng: -77.318191,
zoom: 13
.........
});
}])
// #######| SHOW OVERLAY |#######
.controller('FrostCtrl', ['$scope', '$rootScope', '$compile', function($scope, $rootScope, $compile) {
$scope.pushFrost = function() {
var el = angular.element(document.getElementById('myPane'));
el.attr('frost', '');
el = $compile(el)($scope);
$rootScope.showOverlay = true;
};
}])
//#######| DISPLAYS CONTENTS |##########
.controller('OverlayCtrl', function($scope, $rootScope, $compile) {
$scope.items = [];
for(var i = 0; i < 5; i++) {
$scope.items.push({
text: 'Whatever ' + (i+1)
});
}
$scope.hideFrost = function() {
$rootScope.showOverlay = false;
var el = angular.element(document.getElementById('myPane'));
};
})
app.js
config(['$stateProvider', '$urlRouterProvider','$locationProvider',function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('app', {
name: 'app',
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('app.discover', {
name: 'app.discover',
url: "/discover",
views: {
'menuContent': {
templateUrl: "templates/discover-tabs-controller.html"
}
}
})
// 私のdiscover-home.html .state('app.discover.home', {
url: "/home",
views: {
'home-tab': {
templateUrl: "templates/discover-tabs/discover-home.html",
controller: 'ActivityCntl'
},
'discover-home-listview': {
templateUrl: "templates/discover-tabs/discover-home.html",
}
}
}))
メニュー
これはサイドメニュー項目を制御します
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
//IT GETS PUSHED UNDER THIS
<ion-nav-bar class="bar-calm">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">MYApps</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close ng-click="login()">
<i class="icon ion-person"></i>
Login
</ion-item>
<ion-item menu-close href="#/app/discover">
<i class="icon ion-location"></i>
Discover
</ion-item>
<ion-item menu-close href="#/app/map">
<i class="icon ion-map"></i>
Map
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>