2

I am trying to use onsen ui in Cordova development.

      <body ng-controller="AppController" > 

    <!-- Navigator as root element -->
    <ons-navigator var="myNavigator" ng-controller="SubController" ons-prepush="onPopPost($event)" ons-postpop="onPopPost($event)"> 
        <ons-page>
            <ons-toolbar fixed-style>
                <div class="left"></div>
                <div class="center"><img src=""></div>
                <div class="right"></div>
            </ons-toolbar> 
           <ons-tabbar position="top">
            <ons-tabbar-item active="true" page="latest.html" id="latestTab">
              <div class="tab">
                <ons-toolbar-button class="tabmain" modifier="outline">&nbsp;&nbsp;&nbsp;Latest&nbsp;&nbsp;<span id="notificationLatest" class="notification" style="display:none">*</span></ons-button>
              </div>
            </ons-tabbar-item>    
    </ons-tabbar>  
     </ons-page>  
    </ons-navigator> 

 <ons-template id="latest.html">
      <ons-page ng-controller="MainPageController" fixed-style>  
 </ons-page>
  </ons-template>

In app.js I have

module.controller('AppController', function($scope,$timeout) {
$scope.onPopPost = function(event) {
        console.log("sad");
        console.log(event.enterPage);

      }

The event is not firing. As per the documentation this is supported. But I could not see this event firing. Is there any other settings I need to do?

1 Answer 1

3

Your navigator has the postpop handler but you are not pushing a page in the navigator. You are changing pages in the tabbar and those are different components. Use these events instead: http://onsen.io/reference/ons-tabbar.html#attributes

<ons-tabbar ng-controller="AppController" ons-postchange="onPopPost($event)" position="top">
   ...
</ons-tabbar>

Working here: http://codepen.io/frankdiox/pen/NqOELO

Hope it helps!

3
  • Thank you for the answer. I see the code is working in the codepen. But this is not firing in my project. I will create a minimal codepen code and send you the link. There is a ng-click I have added for the content inside one tab item. On Click of it I am using the code myNavigator.pushPage('launcher.html', { animation : 'lift' } ); there is a close button on the launcher.html. in that I am calling myNavigator.popPage('launcher.html'); none of these are firing any events
    – kirant400
    Jul 27, 2015 at 3:55
  • Fran Dios, added the code here. http://codepen.io/kirant400/pen/jPeRNo. if I add angular.module('app', ['onsen', 'ngSanitize']); code is not working. and tab events are working but not the push events
    – kirant400
    Jul 27, 2015 at 12:50
  • 1
    myNavigator.pushPage() is working well. It is firing an event, I can see it on the console. However, you have a problem with Angular controllers in launcher.html. That page has no controller so when you call closeLaunch() nothing happens.
    – Fran Dios
    Jul 28, 2015 at 2:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.