嘿我正在研究这个离子项目，出于某种原因，我的观点只会在离子视图类等于一个＆＃34; bar-subheader＆＃34;类时呈现。我一直在努力弄清楚我做错了什么，也许我已经读错了文档。发生的事情是，当嵌套状态呈现时，视图的整个布局的高度等于类＆＃34; bar-subheader＆＃34;或者视图没有一个＆＃34; bar-subheader＆＃34;分配给视图。在stores.html中，产品出现在视图中，但因为离子视图类等于＆＃34; bar-subheader＆＃34;你不会看到剩余的内容。没有一类＆＃34; bar-subheader＆＃34;内容将闪烁半秒然后消失。
App.js
angular.module('ArtSFApp', ['ionic', 'controllers', 'starter.services'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/app.html',
controller: 'AppCtrl'
})
.state('app.store', {
url: '/store',
views: {
'store': {
templateUrl: 'templates/store.html',
controller: 'StoreCtrl'
}
}
})
.state('app.store.artist', {
url: '/artist',
views: {
'artist': {
templateUrl: 'templates/artist.html',
controller: 'StoreCtrl'
}
}
})
.state('app.store.categories', {
url: '/categories',
views: {
'categories': {
templateUrl: 'templates/categories.html',
controller: 'StoreCtrl'
}
}
})
.state('app.store.categories.paintings', {
url: '/paintings',
views: {
'paintings': {
templateUrl: 'templates/paintings.html',
controller: 'StoreCtrl'
}
}
})
.state('app.store.categories.sculptures', {
url: '/sculptures',
views: {
'sculptures': {
templateUrl: 'templates/sculptures.html',
controller: 'StoreCtrl'
}
}
})
.state('app.store.categories.drawings', {
url: '/drawings',
views: {
'drawings': {
templateUrl: 'templates/drawings.html',
controller: 'StoreCtrl'
}
}
})
.state('app.store.categories.prints', {
url: '/prints',
views: {
'prints': {
templateUrl: 'templates/prints.html',
controller: 'StoreCtrl'
}
}
})
.state('app.store.categories.books', {
url: '/books',
views: {
'books': {
templateUrl: 'templates/books.html',
controller: 'StoreCtrl'
}
}
})
.state('app.store.sale', {
url: '/sale',
views: {
'sale': {
templateUrl: 'templates/sale.html',
controller: 'StoreCtrl'
}
}
});
$urlRouterProvider.otherwise('/app/blog');
});
的index.html
<body ng-app="ArtSFApp">
<ion-header-bar class="main-header bar">
<div class="row">
<div class="logo col-offset-10 col-20">
ArtSFBlog
</div>
<label class=" searchbar col-33 col-offset-25 item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input ui-sref="app.search" type="text" ng-model="searchText" placeholder="Search">
</label>
<div class="cart">
<i class="ion-ios-cart" ui-sref="app.cart"></i>
</div>
</div>
</ion-header-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
</html>
app.html
<ion-tabs class="tabs-top">
<ion-tab class="navtab" title="Blog" ui-sref="app.blog"></ion-tab>
<ion-tab class="navtab" title="Store" ui-sref="app.store"></ion-tab>
<ion-tab class="navtab" title="Contact" ui-sref="app.contact"></ion-tab>
</ion-tabs>
<ion-view>
<ion-content>
<ion-nav-view name="blog"></ion-nav-view>
<ion-nav-view name="store"></ion-nav-view>
<ion-nav-view name="contact"></ion-nav-view>
<ion-nav-view name="search"></ion-nav-view>
</ion-content>
</ion-view>
store.html
<ion-view title="Store" class="bar-subheader">
<ion-content ng-controller="StoreCtrl" >
<ion-header class="bar">
<ion-panel ng-click="openPopover2($event)" class="tab-item active" ui-sref="app.store.artist">
Artist
</ion-panel>
<div ng-click="openPopover($event)" ng-click="myFilter = { }" class="tab-item active" ui-sref="app.store.categories">
Categories
</div>
<div class="tab-item active" ui-sref="app.store.sale">
Sale
</div>
</ion-header>
</ion-content>
</ion-view>
<ion-content class='has-subheader'>
<ion-list ng-repeat="product in products | filter:myFilter">
<ion-item>
<ion-panel class="item-thumbnail-left"></ion-panel>
<h2> {{product.title}} </h2>
<p> {{product.artist}} </p>
<p> {{product.description}} </p>
<p> {{product.dimensions}} </p>
<p> {{product.price}} </p>
<p> {{product.quantity}} </p>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
controllers.js
angular.module('controllers', [])
.controller('StoreCtrl', function($scope, $ionicPopover) {
$scope.products = [
{
type: "painting",
title: "painting1",
artist: "artist",
description: "description",
dimensions: "10 x 10",
price: "$0.00"
},
{
type: "painting",
title: "painting2",
artist: "artist",
description: "description",
dimensions: "10 x 10",
price: "$0.00"
},
{
type: "drawing",
title: "drawing1",
artist: "artist",
description: "description",
dimensions: "10 x 10",
price: "$0.00"
},
{
type: "zines",
title: "zine",
artist: "artist",
description: "description",
dimensions: "10 x 10",
price: "$0.00"
}
];
$ionicPopover.fromTemplateUrl('templates/categories.html', {
scope: $scope,
}).then(function(popover) {
$scope.popover = popover;
console.log('opening');
});
$ionicPopover.fromTemplateUrl('templates/artist.html', {
scope: $scope,
}).then(function(popover2) {
$scope.popover2 = popover2;
console.log('opening');
});
$scope.openPopover2 = function($event) {
$scope.popover2.show($event);
console.log('opened');
};
$scope.openPopover = function($event) {
$scope.popover.show($event);
console.log('opened');
};
});
categories.html
<ion-popover-view>
<ion-content>
<div class="list">
<a class="item" ng-click="myFilter ={paintings}" ui-sref="app.store.categories.paintings">Painting</a>
<a class="item" ng-click="myFilter ={type: sculpture}" ui-sref="app.store.categories.sculpture">Sculpture</a>
<a class="item" ng-click="myFilter ={type: drawings}" ui-sref="app.store.categories.drawings">Drawings</a>
<a class="item" ng-click="myFilter ={type: prints}" ui-sref="app.store.categories.prints">Prints</a>
<a class="item" ng-click="myFilter ={type: books}" ui-sref="app.store.categories.books">Books</a>
<a class="item" ng-click="myFilter ={zines}" ui-sref="app.store.categories.zines">Zines</a>
</div>
</ion-content>
</ion-popover-view>