我正试图让<ion-tab>
使用ng-click,问题是,我让ActionSheet选择了该选项。但是页面没有加载,
以下是我的代码
#tabs.html
<ion-tab title="Recipe" icon-off="ion-pizza" icon-on="ion-pizza assertive" ng-click="recipeAction()">
<ion-nav-view name="manage-recipe"></ion-nav-view>
</ion-tab>
#click event
$scope.recipeAction = function(){
$ionicActionSheet.show({
buttons: [
{ text: 'Add new recipe' },
{ text: 'Draft Recipes' },
],
titleText: 'Manage your recipes',
cancelText: 'Cancel',
buttonClicked: function(index){
var path = '';
switch(index){
case 0:
path = 'app.new';
break;
case 1:
path = 'app.unpublished';
break;
}
$state.go(path);
}
});
}
#app.js
.state('app.unpublished', {
url: '/unpublished',
views: {
'manage-recipe': {
templateUrl: 'templates/recipes/unpublished.html',
controller: 'unpublishedCtrl'
}
}
})
当我单击选项卡时,它会加载ActionSheet,问题是当我选择一个选项时,比如'草稿食谱',它不会将new_recipe页面加载到选项卡。
然而,它将URL更改为http://localhost:8100/#/app/unpublished(这是正确的,我有一个同名的html文件)
我可以在这里找到什么?
答案 0 :(得分:1)
您可以在ng-click位置使用on-select事件进行离子标签更改事件
<ion-tab title="Content 1" on-select="doSomeForcontent1()">
Content 1
</ion-tab>
<ion-tab title="Content 2" on-select="doSomeForcontent2()">
Content 2
</ion-tab>
答案 1 :(得分:0)
您没有使用ng-click with ion-tabs。两个人不能很好地合作。这是一个解决方法:how-to-call-a-function-on-click-in-ion-tabs
答案 2 :(得分:0)
只要在tabs.html里面的app.js文件添加相应的路由,使用ng-click方法切换html对应的js名称即可 app.js
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html',
controller: 'reserveCtrl'
})
tabs.html
<ion-tab title="预约" icon-off="ion-ios-time-outline" icon-on="ion-ios-time" ng-click="switchReserve()">
<ion-nav-view name="reserve"></ion-nav-view>
</ion-tab>
reserve.js
systecApp.controller('reserveCtrl',function($scope){
/*跳转至预约选项卡*/
$scope.switchReserve = function(){
.......
$state.go('tab.reserve',{'meeting': null});
};
})
答案 3 :(得分:0)
在Ionic 2.x中,它实际上是(ionSelect):
而不是:
struct Point {
x: f64,
y: f64,
}
let p = Point { x: 0.0, y: 5.0 };
let Point { x, y: height } = p;
尝试:
on-select="recipeAction()"