Binding variable in Service with variable in Controller - angularjs

Question

I try to do some databindings between a controller and a service.
I just want my variable userIsConnected, which is into my controller, has to change as soon as the function getUserIsConnected returns an other value.
Maybe I have to add an attribute userIsConnected into my service?
Here the example :
app.service('UserService', function($http){
var user = null;
this.getUser = function (){
return user;
};
this.setUser = function (user){
user = user;
};
this.getUserIsConnected = function (){
if(user)
return true;
else
return false;
};
});
app.controller("NavBarCtrl", function($scope, $http, $location, $rootScope, UserService) {
$scope.signInIsDisabled = true;
$scope.userIsConnected = UserService.getUserIsConnected();
});
Thanks for your help

Answer 1

The problem with this:
$scope.userIsConnected = UserService.getUserIsConnected();
...is that $scope.userIsConnected becomes whatever getUserIsConnected() outputs in the moment the Controller is initialized. If you want it to continue updating, you should try something like this instead:
$scope.userIsConnected = UserService.getUserIsConnected;
And then in your view, you would use {{userIsConnected()}}.
HOWEVER, from my experience, this sort of watcher is very expensive on rendering. Because when the view is rendered, it will actually run userIsConnected() 10 times before finally giving-up (because in AngularJS, the stack overflow limit is capped at 10).
I used that method in my applications when I first started using AngularJS. But now, I have a directive called "myDynamicMenu", and it detects when a route event has fired using $routeChangeSuccess (ie. when user changes page from login to dashboard, or from dashboard to logout to home).
At this event, my menu directive will check the user authentication state (logged-in or logged-out), and it will then display the proper menu (ie. the user menu [dashboard, my settings, logout], or the guest menu [login, register]). This method is much faster at rendering.
Edit: Example directive:
app.directive('myDynamicMenu', function ($rootScope, UserService) {
return {
restrict: 'E',
templateUrl: 'my-dynamic-menu.html',
link: function (scope) {
$rootScope.$on('$routeChangeSuccess', updateMenuWhenRouteChanges);
////////////////////////////////////////////////////////////
function updateMenuWhenRouteChanges () {
scope.isLoggedIn = UserService.getUserIsConnected() ? true : false;
}
}
};
});
Your template would be something like:
<div id="guest-menu" ng-show="!isLoggedIn">
I am a logged-out guest!
</div>
<div id="member-menu" ng-show="isLoggedIn">
I am a logged-in member!
</div>
And drop the menu into your layout using <my-dynamic-menu></my-dynamic-menu>.