I am currently delving into the world of Angular and experimenting with different ways to learn how it functions. One of my projects involves creating a simple application where users can add new entries through an HTML interface, store them in a SQLite database, and subsequently edit or delete them.
In order to understand the manual implementation of $scope.apply(), I set up a scenario where its usage was necessary:
Within a function, I stored some variables in localStorage and then manually opened an HTML file:
localStorage.setItem('idUsuario', response.records[0].idUsuario);
localStorage.setItem('dato_Nombre', response.records[0].nombre);
localStorage.setItem('dato_ApPat', response.records[0].apPat);
localStorage.setItem('dato_ApMat', response.records[0].apMat);
localStorage.setItem('dato_Direccion', response.records[0].direccion);
localStorage.setItem('dato_Tel', response.records[0].telefono);
localStorage.setItem('dato_email', response.records[0].correo);
//debugger;
location.href = "editClient.html";
Within the opened HTML file, I utilized ng-init() within my controller to retrieve the stored data and assign it to ng-model variables which were linked to text inputs:
$scope.init = function () {
$scope.idUsuario = localStorage.getItem("idUsuario");
$scope.dato_Nombre = localStorage.getItem("dato_Nombre");
$scope.dato_ApPat = localStorage.getItem("dato_ApPat");
$scope.dato_ApMat = localStorage.getItem("dato_ApMat");
$scope.dato_Tel = localStorage.getItem("dato_Tel");
$scope.dato_Direccion = localStorage.getItem("dato_Direccion");
$scope.dato_email = localStorage.getItem("dato_email");
localStorage.clear();
}
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label" >Nombre</span>
<input type="text" placeholder="Escriba su nombre" ng-model="dato_Nombre" >
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Apellido Paterno</span>
<input type="text" placeholder="Escriba su apellido paterno" ng-model="dato_ApPat">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Apellido Materno</span>
<input type="text" placeholder="Escriba su apellido materno" ng-model="dato_ApMat">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Dirección</span>
<input type="text" placeholder="Escriba su dirección" ng-model="dato_Direccion">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Teléfono</span>
<input type="text" placeholder="Escriba su teléfono" ng-model="dato_Tel">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Email</span>
<input type="text" placeholder="Escriba su correo" ng-model="dato_email">
</label>
<center>
<button class="button button-possitive" ng-click="editarCliente()">Actualizar</button>
</center>
</div>
Upon loading the form, the input fields were successfully populated with data from localStorage. However, upon editing this information and invoking a function to return the updated data within each ng-model variable, I encountered that the changes made in the inputs did not reflect in the ng-model values due to them being still assigned with localStorage data. This led me to consider using $scope.apply().
The issue surfaced when attempting to use $scope.apply(), as an error stating that apply was already running kept appearing, hindering my progress in updating the content of the text inputs.