CODEWITHSUNDEEP
onsen-ui
Alexandre Alves
Alexandre Alves

Reputation: 23

Parent controller module is not loaded after pop page through <ons-back-button> from a pushed page

that's my first question so I´m afraid to be a silly one but I have done a lot of research before and spend many ours trying to fix this by changing the code. I´m relatively new to web app programming and maybe missing some conceptual knowledge that can be blocking me to go forward.

Environment and tools: Using cordova, onsen ui, Android studio, angularjs to develop a sort of Engineer Calculator on my area of expertise, I´m not a professional programmer.

The app is based in a series of pages connected as in the below user data/page flow and the app is working fine except for the problem I´m asking for help.

(I cant post images yet)

It's a dataflow like this:

menu.html >> page1.html >> load.html

For every html page view I have a controller module, all modules in the same controller file. The sliding menu defined in the index.html calls the page1.html for instance, that is the only page having a SVG graphic than linked to load.html page through a onclick Push page. See below the pages code:

menu.html

<body onload="onLoad()" ng-app="calcfcc" ng-controller="calcfccController">

<!-- to transfer to AS start here -->

<ons-sliding-menu
        menu-page="menu.html" main-page="page1.html" side="left"
        var="menu" type="reveal" max-slide-distance="200px" swipable="true">
</ons-sliding-menu>

<!-- sliding-menu - Menu list here!!! -->

<ons-template id="menu.html">
    <ons-page modifier="menu-page">
        <ons-toolbar modifier="transparent"></ons-toolbar>

        <ons-list class="menu-list">

            <ons-list-item class="menu-item" ng-click="menu.setMainPage('page1.html', {closeMenu: true})">
                <ons-icon icon="fa-home"></ons-icon>
                {{menu1}}
            </ons-list-item>

page1.html called from slide menu:

<ons-navigator animation="slide" var="page1navi">
<ons-page ng-controller="initController" on-device-backbutton="backbuttonpage()" style="background: #001a00;">




    <ons-toolbar fixed-style>
        <div class="left">
            <ons-toolbar-button id="popoverb1" ng-click="menu.toggle()">
                <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
            </ons-toolbar-button>
        </div>
        <div class="center">
            {{pageheader1}}
        </div>
        <div class="right" style="padding: 7px;">
                <img src="img/AASis78x31branco.png" alt="AASis" >
        </div>
    </ons-toolbar>

page1.html portion that calls load.html from a clickable SVG icon:

<g
                id="g4533"
                onclick="page1navi.pushPage('load.html', { animation : 'slide' } )"
                transform="translate(0,-66.958368)">
            <rect
                    style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:url(#linearGradient4485);fill-opacity:1;fill-rule:evenodd;stroke:#6e6e6e;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
                    id="rect10449"
                    width="60"
                    height="60"
                    x="275.33713"
                    y="786.85248"
                    rx="6.7857499"
                    ry="6.3835001" />

load.html page: 

<ons-page ng-controller="loadController">
<ons-toolbar>
    <div class="left"><ons-back-button>{{about1}}</ons-back-button></div>
</ons-toolbar>



<p class="textarea" style="font-size: 20px; border: 2px solid #0066FF; margin: 5px">
    {{load1}}
</p>

So my problem is that page1.html controller is loading fine, load.html controller is also loading fine and making it's job but when a press the load.html page "back" button to return to page1.html the page1 controller is not loaded and I cant refresh the view with data I have manipulated on load.html.

It's not about global vars, is just that the right controller is not loaded.

When a called page1.html from index.html it works, but I can ask the user to get back to side menu just to refresh. Also reload all is not a option, very annoying to the user.

Any idea how to solve this?

TKS in advanced!!!!

Upvotes: 2

Views: 1062

Answers (1)

Fran Dios
Fran Dios

Reputation: 3482

Controllers are only run once when the page is created. When you use back-button you are destroying load.html and moving back to page1.html, but this one was already created in the page stack so its controller won't be called again. Also, AngularJS will only recognize changes if they are done inside Angular's scope. Otherwise you will need to use $scope.$apply() to let Angular know about the changes. You could use $scope.$apply() on Onsen UI's postpop event.

In any case, if you are using AngularJS I think you should have ng-click instead of onclick. Also, you can bind the text-area to a scope variable using ng-model, so every change you do in the view will be stored automatically. I think it should be enough with these two changes.

Hope it helps!

Upvotes: 2

Related Questions