Currently, I am utilizing OnsenUI in conjunction with AngularJS to create a searching application. On page1, the user inputs the data they wish to search for. Upon clicking the search button, page1 is added to the stack and a background GET request is triggered to retrieve the requested data.
To handle the data obtained from the service, I have employed a global variable. I am using `$watch` to monitor any changes in the data and update the respective scope variable with the updated value.
Below is a snippet from the app.js file:
(function () {
'use strict';
var x;
var app = angular.module('myApp', ['onsen.directives']);
app.factory('pageService',['$http', function ($http) {
var fetchedData;
return {
start: function(){
$http({method: 'GET', url: 'http://127.0.0.1:3000'}).
success(function(data, status, header, config){
console.log('Success !');
console.log('Data Name : ' + data[0].name);
x = data[0];
return data;
}).
error(function(data, status, header, config){
console.log('fail !');
return status;
})
},
getData: function(){
return fetchedData;
}
};
}]);
app.controller('page1Ctrl',function($scope,pageService){
$scope.goToPage2 = function(){
$scope.x = pageService.start();
$scope.ons.navigator.pushPage("page2.html");
}
});
app.controller('page2Ctrl',function($scope,pageService){
$scope.$watch('x',function(newValue, oldValue){
console.log("x = " + newValue);
$scope.x = x;
});
});
})();
Within the index.html body:
<body>
<ons-screen>
<ons-page class="center" ng-controller="page1Ctrl">
<ons-navigator title="Page 1">
<div class="center">
<h1>Pharmy</h1>
<ons-text-input ng-model="medicine" placeholder="Enter Medicine Name" style="display:block; width:100%;" id="test"></ons-text-input>
<div style="position:relative">
<ons-text-input ng-model="location" placeholder="Enter Location" style="display:block; width:100%; margin-top:10px;"></ons-text-input>
<ons-icon icon="search" style="position:absolute;right:10px;top:5px;"></ons-icon>
</div>
<ons-button ng-click="goToPage2()"
style="width:10%; margin-top:10px;">
<ons-icon icon="search"></ons-icon>
</ons-button>
</div>
</ons-navigator>
</ons-page>
</ons-screen>
</body>
and in page2.html:
<ons-page class="center" ng-controller="page2Ctrl">
<ons-navigator-toolbar
title="Page 2">
</ons-navigator-toolbar>
<h2>Page 2</h2>
<textarea id="test2" ng-model="x"></textarea>
</ons-page>
I'm encountering an issue where the text area in page2.html is failing to update. What aspect am I overlooking?