I have to refresh header.html after Login in angularjs. When Login is called, the whole page is refreshed and header is initialized but after login only content is loaded not header. What can i do to refresh header.
<div class="container-holder" ng-controller="mainCtrl">
<div class="container">
<div ng-include src='"elements/header.html"'></div>
<div ng-view class="clearfix"></div>
</div>
</div>
I have to refresh header.html.
I struggled with this for days when I started using AngularJS. Just for newbies... If your header / footer is outside the app view, it will not get refreshed on route changes. You have to have an explicit event listening added in the header / footer directive. Basically you listen for the login-changed-event using a rootScope.$on('login-chnaged-event', function() {});
In this you have to set the scope variables like isLoggedIn or the loggedInUser info. Your login service should fire the login-changed-event whenever the login status changes. This is listened by the directive which updates scope variables of header directive... which will finally rerender the header.
If you want to change your header template you could probably use an ng-switch i.e:
<div ng-switch on="login">
<div ng-switch-when="true">Logged in!</div>
<div ng-switch-default>Not Logged in</div>
</div>
and in your controller you would only need to toggle a boolean variable called $scope.login
mainCtrl. If that's the case, your header partial will update the bindings automatically.