javascript - Onsen and AngularJS: Reload List Item and data -
i'm using onsen ui , angularjs. have problem.
when page1.html page2.html how call 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 answers guys. problem has solved.
solution: http://monaca.mobi/en/blog/lets-make-a-phonegap-app-with-angularjs-onsen-ui/
please try example. $scope.$watch called when leave or enter in page.
<!doctype html> <!-- csp support mode (required 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 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> 
Comments
Post a Comment