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

【问题标题】：How to open page with ons-tabbar, and display specific tab如何使用 ons-tabbar 打开页面，并显示特定选项卡
【发布时间】：2014-11-11 10:10:27
【问题描述】：

如何使用 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);
}]);

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

【问题讨论】：

您需要提供代码、您尝试过的内容以及问题所在。否则你不会得到太多帮助。另外，我在这里没有看到任何提到 AngularJS，但你确实标记了它。

标签： angularjs onsen-ui

【解决方案1】：

是的，当控制器执行时确实不会有任何标签栏对象，但它会在之后立即创建。

所以你可以在控制器中使用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 事件，您可以监听它，这可能更好用。事件对象将附加标签栏对象，因此您可以执行以下操作：

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

【讨论】：

非常感谢。第一个解决方案就像一个魅力。使用第二个，似乎合适，但我有一些疑问：如果我使用 init 事件，someElement 是什么？在 AngularJS 上下文中，我应该在哪里设置事件监听器？
太棒了！您可以将事件侦听器附加到 document，但也许在 Angular 应用程序中，第一个解决方案更好。