Update dashboard data

ionic-v1
1

Well, I’m working on a mobile application with ionic framework. In one of my views, the user can edit your name, password and also its image. For this I am using the CordovaFileTransfer plugin and it works great for me. I’m managing to change the image and all the data I need. But not even like getting to change the data in my database, update the application. Let me explain.

When the user changes their image or their data, the web service response returns a “status 1” if achievement make the change successfully and also the URL of the image and the new name change. This we have in localStorage variables and $ rootScope within my application which update once it receives a status one from my server but to return to my dashboard application that is not updated, I close and open the application again and reflected the changes. As a way to do it, maybe my question is very basic but that works for more than one person.

JSON WEBSERVICE RESPONSE :

Object {status: 1, photo: "www.google.cl/de5a0cc049d0f3c394befb83d2cb44e3.jpg", name: "Test"}

Code controller angularjs

$cordovaFileTransfer.upload(encodeURI(server),image,ftOptions,true)
  .then(function(result) {
      var respuestaJSON = jQuery.parseJSON(result.response);
      if(respuestaJSON.status == 1){
        sessionService.set("user",respuestaJSON.name);
        sessionService.set("photo", respuestaJSON.photo);
        $rootScope.username = sessionService.get("user");
        $rootScope.photo = sessionService.get("photo");

sessionService :

.factory('sessionService',['$http',function($http){
  return {
    set:function(key,value){
    return localStorage.setItem(key,JSON.stringify(value));
  },
   get:function(key){
     return JSON.parse(localStorage.getItem(key));
  },
   destroy:function(key){
     return localStorage.removeItem(key);
  },
 };
}])

HTML CODE :

<div id="dashboard-header">
<center>
  <div id="home-avatar" style="background-image:url('{{photo}}')"></div>
</center>
2

I think that your data is only binding on the initial load, that being said you need to tap into the state events that angular and ionic have set up for you.

$scope.$on('$ionicView.beforeEnter', function() {
// Your code here
});

Is a great one to get started with, so in your controller you should use that to get the data.

Also you MIGHT be running into an issue where that function is setting stuff to the scope, but it missed Angular’s loop to render it. In this case I’d try

$scope.$apply();

After you set the root scope variables and see if that works.

Just as an app structure/design note: I would not be setting things in the root scope, but rather another service to be used in your controllers. The root scope should not really act as a global store for random variables. You can use it like that, but really not recommended.

1 Like
3

NorthMcCormick ist right to avoid putting things on the $rootScope if not necessary.

AngularJS has a refresh-cycle for all scopes. so if a value of the rootScope changes… all childScopes will be triggered to look if something changed.

If you are using ordinary JavaScript-events or jquery-Events you are working outside of angularJS… AngularJS only recognizing things that were changed in the Angular context.

And NorthMcCormick is also right -> all things connected to the backend should be placed in services… because you should keep controllers small and simple… it is mentioned for the UI-logic, like defining click-functions, put data on the scope. In this case with async-code you should read things about promises and the angular component $q.

But in your case $scope.$apply or $timeout should help.
I am not a friend of triggering the digest-cycle directly. Thatswhy i am using in most cases $timeout to hang in to the next digst.

And another little thing. Why do you using jQuery.parseJSON in your controller but the native JSON.parse/stringify in the factory?

1 Like