Onsen and AngularJS: Reload List Item and data

Question

I'm using Onsen UI and AngularJS. But i have this problem.

When i back to page1.html from page2.html how to call any function in page1.html ?

page1.html

<ons-list>
<ons-list-item ng-repeat="user in users" modifier="chevron" class="list-item-container">
     content
</ons-list-item>
</ons-list>
<ons-button onclick="Navigator.pushPage('page2.html')">Go Page 2</ons-button>

page2.html

<ons-toolbar>
    <ons-back-button>Back</ons-back-button>
</ons-toolbar>

Thanks for answers guys. My problem has solved.

Solution: http://monaca.mobi/en/blog/lets-make-a-phonegap-app-with-angularjs-onsen-ui/

You just check https://onsen.io/guide/overview.html#EventHandling — Paresh Gami, Aug 25 '15 at 08:51
@PareshGami, Thank you for quick reply. Sorry I'm trying few hours. Can you suggest me some example ? — user1999, Aug 25 '15 at 09:09
Please, first read the docs as Paresh Gami suggests. Also check SOF answered questions, I made an example for this an hour ago: http://stackoverflow.com/a/32195339/4468962 — Fran Dios, Aug 25 '15 at 09:21

score 0 · Answer 1 · answered Aug 25 '15 at 11:16

Please try this example. $scope.$watch is called when you leave or enter in page.

<!DOCTYPE html>
<!-- CSP support mode (required for Windows Universal apps): https://docs.angularjs.org/api/ng/directive/ngCsp -->
<html lang="en" ng-app="app" ng-csp>
<head>
    <meta charset="utf-8" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="mobile-web-app-capable" content="yes" />

    <!-- JS dependencies (order matters!) -->
    <script src="scripts/platformOverrides.js"></script>
    <script src="lib/angular/angular.js"></script>
    <script src="lib/onsen/js/onsenui.js"></script>

    <!-- CSS dependencies -->
    <link rel="stylesheet" href="lib/onsen/css/onsenui.css" />
    <link rel="stylesheet" href="lib/onsen/css/onsen-css-components-blue-basic-theme.css" />

    <!-- CSP support mode (required for Windows Universal apps) -->
    <link rel="stylesheet" href="lib/angular/angular-csp.css" />


    <!-- --------------- App init --------------- -->

    <title>Onsen UI Split View</title>



</head>

<body>
    <!-- Cordova reference -->
    <script src="cordova.js"></script>
    <script src="scripts/index.js"></script>
    <!-- -->

    <ons-navigator title="Navigator" var="myNavigator">
  <ons-page ng-controller="firstctrl">
    <ons-toolbar>
      <div class="center">Simple Navigation</div>
    </ons-toolbar>
    <div style="text-align: center">
      <br>
      <ons-button modifier="light" onclick="myNavigator.pushPage('page1.html', { animation : 'slide' } )">
        Push Page
      </ons-button>
    </div>
  </ons-page>
</ons-navigator>

<ons-template id="page1.html">
  <ons-page ng-controller="secondctrl">
    <ons-toolbar>
      <div class="left">
        <ons-back-button>Back</ons-back-button>
      </div>
      <div class="center">Page 2</div>
    </ons-toolbar>

    <div style="text-align: center">
        <br />
        <ons-button modifier="light" onclick="myNavigator.popPage()">
            Pop Page
        </ons-button>
    </div>
  </ons-page>
</ons-template>


</body>
</html>

<script>
    var app = angular.module('app', ['onsen']);

    app.controller('firstctrl', function($scope, $http)
    {
            $scope.$watch(function( $scope ) 
            {
                console.log( "Function watched" );
            });
    });

    app.controller('secondctrl', function($scope, $http)
    {

    });
</script>

Thank you for example. Bad question. Then i edited question. "When i back to page1.html from page2.html how to call any function in page1.html ?" — user1999, Aug 26 '15 at 02:13
@user1999 check the link I said in the other comment, specifically the function `updateParamEvents` in Codepen. — Fran Dios, Aug 26 '15 at 02:47

Onsen and AngularJS: Reload List Item and data

1 Answers1