Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

When I use pushPage to push a page to the top of the stack, can I pass the parent scope? (Angular 1)

  • I have an ons-navigator on my Home page. Using a splitter, I can successfully navigate to a new page (lets call it page A), which is defined in a separate file. I am using resetToPage() to load this page.

    In this separate file containing page A, in addition to the contents of page A, I have another template/page defined at the bottom (lets call this page B.
    By clicking a button on page A, I navigate to page B via pushPage() (as opposed to resetToPage() which is how I got to page A).

    I want these pages to share the same controller. When page A is loaded, its controller is initialized. When page B is loaded, I want it to share/inherit page A’s controller without having to set ng-controller again.

    After reading the documentation and some searching through the forums, I can not find an example of this, and do not know if it is possible.

    I am looking to do something similar to when I create a Dialog and have it inherits the parent’s scope like this:

    ons.createDialog('filterDialog.html', { parentScope: $scope }).then(function(dialog) {

    I am currently setting ng-controller again in Page B (to the same controller as page A), which is leading to some methods being called twice, because the controller is being initialized twice.

    Is what I’m trying to do possible?

  • It’s been a week, and I’m only looking for a yes or no answer. Can anyone help me here?

  • Onsen UI

    @rgins16 No, I don’t think it’s possible. For the dialog you can provide parentScope because the dialog is supposed to be a child of the page that calls it. However, in your situation, page A is not the parent of page B, they are siblings in the page stack. That in AngularJS cannot inherit a scope. If you want to share controller you should put it in ons-navigator and check the ID (or name) of page A and page B to run some specific code if you need. Otherwise… AngularJS services :/

    Other possibilities that I don’t particulary like could be using $rootScope or passing $scope object with pushPage’s and copy its content.

  • Thanks @Fran-Diox. I like your idea of putting the controller in the navigator.