Update Data Binding in Navbar after logging in

Asked

Viewed 292 times

1

I have a navbar which is included in the index.html page

<body>
       <div class="container">
         <div ng-controller="colaboradorController" ng-include="'public/views/navBar.html'"></div>
         <div ng-view></div>
      </div>

      </div>
</body>

So far so good, on that navBar I have one Data Binding where I pick up the logged in user:

<p class="navbar-text usuarioLogado">{{usuarioLogado}}</p>

The controller being used is the collaboratorController, in this controller I have a function that grabs the logged in user:

var init = function () {
        var temp = sessionStorage.getItem('userLogado');
        var viewName = $.parseJSON(temp); 

        if(viewName != null){
            $scope.usuarioLogado = viewName.usuario.nome;
        }else{
            $scope.usuarioLogado = "";
        }
    };

And I start this function when the page opens:

init();

The problem is that when the page opens the usuarioLogado is not displayed on NavBar, he only appears after a F5. I’ve done one console.log to see if it is being loaded along with the page and it is loaded. I’m just not able to update immediately this Navbar that is being included in my index.html.

How do I solve this problem?

angularjs

1 answer

0


Taking information from sessionStorage can be a good one, but in this case as the variable state is mutable it would be good if you put a watch to observe each event if the value remains the same.

Take a look at this link: (https://stackoverflow.com/questions/15112584/angularjs-using-scope-watch-and-scope-apply), quickly explains how the watch and Digest Cycle work.

The sessionStorage is good to save service queries, but of things that has a defined return, that does not suffer change. Maybe this will help clarify a little more.(https://stackoverflow.com/questions/26172976/difference-between-session-storage-local-storage-and-cookies-in-angularjs)

  • Thanks for the reply, so what is in sessionStorage is the logged in user, I think this will not be updated. When I put navBar directly on the page, ie without including it in the index.html works perfectly.

  • I just wanted a solution so I don’t have to keep putting a navBar on each page

  • And it still doesn’t need to, as SPA the navbar can stay in index.html, without having to be repeated on every page. If you do not add the variables contained in it within a click of watches every time you change page the angular bind will not update the changes, these changes will only appear after you refresh the page or update the service that picks up the information. It is not recommended to add many watches in the tool, they speak of a limit of up to 2000 (including the existing watches in Angularjs), so take care or your application can get mto slow

Browser other questions tagged angularjs

You are not signed in. Login or sign up in order to post.