ons-tabbar로 페이지를 열고 특정 탭을 표시하는 방법

ons-tabbar가 포함 된 페이지를 열고 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을 호출 할 수 없다고 말합니다. 컨트롤러가 실행될 때 탭바가 만들어지지 않았기 때문에 이것이 가능할 수도 있지만 일부 네비게이터 매개 변수를 기반으로 페이지가 표시 될 때 특정 탭을 표시하는 방법을 알 수 없습니다.

출처

2014-11-10 Guillermo Gutiérrez

코드를 제공하고, 시도한 내용과, 문제가 어디에 있어야합니다. 그렇지 않으면 많은 도움을 얻지 못할 것입니다. 또한 여기 AngularJS에 대한 언급이 없지만 태그를 추가했습니다. – SoluableNonagon

컨트롤러가 실행될 때 탭바 객체가 없지만 즉시 생성된다는 것은 사실입니다.

컨트롤러에서 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); 
});

출처

2014-11-11 02:10:27

많은 감사. 첫 번째 해결책은 매력처럼 작동했습니다. 두 번째로는 적절하지만, 나는 약간의 의구심이 있습니다 : init 이벤트를 사용하면'someElement'는 무엇입니까? 그리고 AngularJS 컨텍스트에서 이벤트 리스너는 어디에 설정해야합니까? –

좋아요! 'event' 리스너를'document'에 첨부 할 수도 있지만 Angular app에서는 첫 번째 해법이 더 좋습니다. –

ons-tabbar로 페이지를 열고 특정 탭을 표시하는 방법

답변

관련 문제