How to properly reset angularjs v1 factory after a specific function
I created a factory that stores information in my scopes in a series of 6 pages. Now when the user completes the 6th page and pushes the object, I want the factory to reset the arrays again.
I've tried many a time-out and applied elements, also tried to use a lot of combinations to install an array into the empty ( null
, ""
, {}
). but it still loads old information on page reload (p. 1/6).
Send function (which is also needed to reset areas)
$scope.send = function(){
if(ArrayInfo.Checkmark == true){
firebase.database().ref('lorem/' + ArrayInfo.Ordernumber).set({
info: ArrayInfo,
Dates: Dates,
gasmeter: gasmeter,
gasmeter1: gasmeter1
}).then(function(){
firebase.database().ref('lorem2/' + ArrayInfo.currentYear).set({
last_number: ArrayInfo.Ordervalue
});
}).then(function(){
//ArrayInfo = {};
setTimeout(function(){
ArrayInfo = "";
$scope.info = "";
$scope.$apply();
$scope.$digest();
}, 50);
});
//close newrental
setTimeout(function(){
if (window.confirm('Information saved! You are ready to leave this screen? no changes possible after this point'))
{
//disable back button in home
$ionicHistory.nextViewOptions({
disableBack: true
});
//go home
$state.go("app.auth");
}
//error close newrental
else
{
alert("Take your time");
}
}, 50);
}
//error send array
else {
alert("Please accept the terms and conditions.");
}
}
My factory looks like this
mainapp.factory("infoFactory", function(){
ArrayInfo = {};
placeholders = {
"licenseone" : "img/placeholder.png",
"licensetwo" : "img/placeholder.png",
"licensethree" : "img/placeholder.png",
"licensefour" : "img/placeholder.png",
"imageone" : "img/front.png",
"imagetwo" : "img/sideleft.png",
"imagethree" : "img/back.png",
"imagefour" : "img/sideright.png",
"imagefive" : "img/roof.png",
"imagesix" : "img/placeholder.png",
"imageseven" : "img/placeholder.png",
"imageeight" : "img/placeholder.png"
};
gasmeter = {
"url" : "img/gas/gas1.png",
"gasvalue" : "1"
}
gasmeter1 = {
"url" : "img/gas/gas1.png",
"gasvalue" : "1"
}
ArrayInfo.returned = false;
RawDate = {};
Dates = {};
console.log(ArrayInfo);
return ArrayInfo;
return gasmeter;
return gasmeter1;
return placeholders;
return RawDate;
return Dates;
})
and I am loading information into my controller like this
$scope.info = infoFactory;
$scope.Dates = Dates;
$scope.RawDate = RawDate;
$scope.gasmeter = gasmeter;
$scope.gasmeter1 = gasmeter1;
The angular version I am using is "3.6.6"
source to share
First of all, when you put return
in your code, there is no need to include additional code after that, because it will never run. Instead, you need to return Object
.
mainapp.factory("infoFactory", function(){
ArrayInfo = {};
placeholders = {
"licenseone" : "img/placeholder.png",
// Rest of the images
};
gasmeter = {
"url" : "img/gas/gas1.png",
"gasvalue" : "1"
}
gasmeter1 = {
"url" : "img/gas/gas1.png",
"gasvalue" : "1"
}
ArrayInfo.returned = false;
RawDate = {};
Dates = {};
console.log(ArrayInfo);
return {
ArrayInfo: ArrayInfo,
gasmeter: gasmeter,
gasmeter1: gasmeter1,
placeholders: placeholders,
RawDate: RawDate,
Dates: Dates
};
})
Now you can enter infoFactory
into the controller and use it as follows: infoFactory.RawDate
.
Now, if you want to reset the factory, you can add a function to reset all data:
mainapp.factory("infoFactory", function(){
// Save a reference to the current pointer of the factory, so you won't loose it inside other scopes
var self = this;
self.params = {
ArrayInfo: {},
placeholders: {},
gasmeter: {},
gasmeter1: {},
ArrayInfo: false,
RawDate: {},
Dates: {}
};
self.reset = function() {
self.params.ArrayInfo = {};
self.params.placeholders.licenseone = "img/placeholder.png";
self.params.gasmeter.url = "img/gas/gas1.png";
self.params.gasmeter.gasvalue = "1";
self.params.gasmeter1.url = "img/gas/gas1.png";
self.params.gasmeter1.gasvalue = "1";
self.params.ArrayInfo.returned = false;
self.params.RawDate = {};
self.params.Dates = {};
}
self.reset(); // Call this function by default in order to initially set the factory properties
return {
reset: self.reset, // You can export the reset function and use it outside the factory too
ArrayInfo: self.params.ArrayInfo,
gasmeter: self.params.gasmeter,
gasmeter1: self.params.gasmeter1,
placeholders: self.params.placeholders,
RawDate: self.params.RawDate,
Dates: self.params.Dates
};
})
Now that you have a reset function, you can use it like outside the factory: infoFactory.reset()
whenever you want to reset the data to its original state. I created inside the factory a base object ( this.params = { .. }
) and stored all the properties of the parts inside it, inside the function reset
I updated these properties without breaking the original references ( Working example ).
The above example is an example, but you can (or perhaps should) encapsulate params
from a factory and allow the user to manipulate and change the values using helper functions. An example of how to do this:
mainapp.factory("infoFactory", function(){
var self = this;
self.params = {
returned: false,
};
return {
setReturned: function(val) { self.params.returned = val === true; },
returned: function() { return self.params.returned; }
}
});
The above example will hide the actual one params.returned
from the user outside the factory and only allow the return flag to be set via a helper function, that is, infoFactory.setReturned( true );
or infoFactory.setReturned( false );
, but inside setReturned
you can implement complex logic to check the value passed to the function. Note that this will infoFactory.setReturned( 'invalid value!!!' );
set the flag returned
to false
, since I am checking the value using the strict === - operator val === true
.
Then, to get the value from the factory, you call the function infoFactory.returned()
. By using a function, you are blocking external access to the factory properties.
As a side note - Don't use setTimeout(function(){ ... });
Use $ timeout and $ interval and you don't need $scope.$apply();
+ $scope.$digest();
to manually start the digest loop because it is handled nativaly by Angularjs for you.
source to share