使用ion-tab和ng-click一起使用

时间:2015-06-29 10:26:46

标签: angularjs ionic-framework hybrid-mobile-app

我正试图让<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文件)

我可以在这里找到什么?

4 个答案:

答案 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()"