如何使用ons-tabbar打开页面,并显示特定选项卡

时间:2014-11-10 19:31:22

标签: angularjs onsen-ui

如何使用ons-navigator打开一个页面,其中包含一个ons-tabbar,并告诉它显示一个特定的标签?我有一个带有一些按钮的菜单,根据推送的那个按钮,它必须显示在标签栏页面上,并且特定标签处于活动状态。

这是我到目前为止所尝试的:

index.html(主页)

<body>
  <ons-navigator animation="slide" var="app.navi">
    <ons-page>
      <ons-toolbar>
        <div class="center">Inicio</div>
      </ons-toolbar>
      <div>
        <p style="text-align: center">
          <ons-button modifier="large" ng-click="app.navi.pushPage('tabs.html', {params: { tab: 0 }});">OPEN TAB 0</ons-button>
        </p>
        <p style="text-align: center">
          <ons-button modifier="large" ng-click="app.navi.pushPage('tabs.html', {params: {tab: 1}});">OPEN TAB 1</ons-button>
        </p>
      </div>
    </ons-page>
  </ons-navigator>
</body>

tabs.html

<div ng-controller="TabsCtrl">
  <ons-tabbar var="tabbar" position="top">
    <ons-tabbar-item
        icon="home"
        label="Home"
        page="page0.html"></ons-tabbar-item>
    <ons-tabbar-item
        icon="comment"
        label="Comments"
        page="page1.html"></ons-tabbar-item>
  </ons-tabbar>
</div>

AngularJS控制器:

angular.module('myControllers', [])
.controller('TabsCtrl', ['$scope', function ($scope) {
  // Trying to set active tab on the controller
  $scope.tabbar.setActiveTab($scope.ons.navigator.getCurrentPage().options.params.tab);
}]);

但是,当我在主页面中按下一个按钮时,调试器说不能在undefined上调用方法setActiveTab。我知道这可能是因为在执行控制器时没有创建标签栏,但是根据一些导航器参数,我无法弄清楚在显示页面时如何显示特定标签。 / p>

1 个答案:

答案 0 :(得分:2)

是的,当执行控制器时,不会有任何tabbar对象,但它会立即创建。

因此,您可以使用控制器中的setImmediate(fn)来调用setActiveIndex(idx)

示例:

angular.module('app', ['onsen'])

.controller('TabsController', function() {
  setImmediate(function() {
    var tabIndex = app.navi.getCurrentPage().options.params.tab;
    app.tabbar.setActiveTab(tabIndex);
  });
});

笔: http://codepen.io/argelius/pen/XJryPM

实际上,在1.2.0中有一个'ons-tabbar:init' DOM事件你可以听,哪个可能更好用。事件对象将附加tabbar对象,以便您可以执行以下操作:

someElement.addEventListener('ons-tabbar:init', function(event) {
  var tabBar = event.component;
  tabBar.setActiveTab(someIndex);
});