I have a angular service called 'NoteBooksService':
app.factory('NoteBooksService', function() {
var permanentStorage = window.localStorage;
// Initializing the local storage if no data exists in the local storage.
if (permanentStorage.getItem("noteBooks") === null) {
permanentStorage["noteBooks"] = JSON.stringify([
{
name:"Your first notebook", //the defualt title of the notebook
icon:0, // the defualt icon of the nptebook
color:"Blue", // the default color of the notebook.
pages:[ // adding one test page to the notebook.
{
name:"Your first page",
content:"The content of your first page ..."
}
]
}
]);
}
var noteBooks = JSON.parse(permanentStorage["noteBooks"]); // loading the notebooks from local storage.
return { // providing access to this service
noteBooks: noteBooks, // used to get all the notebooks
getNoteBook : function(index) { // returns one particular notebook by index.
return noteBooks[index]
}
}
});
It checks to see if the local storage contains a key, if not it adds the key to the local storage. If the local storage has the key, it loads the data from local storage.
I want to update the service when the data in the local storage changes and I also want to update the variables in my controller that were initialized by this service.
Until now I used $window.location.reload();
after each alteration to the local storage re-render the whole page but now I need to do two things.
I tried the code below but it didn't work as I have expected:
$state.go('NoteBook');
$window.location.reload();
Is there any better way to do this?
Ok, I just needed to do this:
$rootScope.$apply();