There is a piece of code running in the $rootScope to establish a global value for userLoggedIn:
mod.run(function($rootScope) {
$rootScope.userLoggedIn = false;
$rootScope.$on('loggedIn', function(event, args) {
$rootScope.userLoggedIn = true;
});
});
When the user logs in, I utilize $emit to trigger that event:
mod.controller('FacebookController', function($scope) {
$scope.loggedIn = function() {
$scope.$emit('loggedIn');
};
});
This setup is functioning properly.
Next, an attribute directive has been configured to bring the $rootScope into focus:
mod.directive('rootScope', function() {
return {
scope: { userLoggedIn: '@' },
restrict: 'A'
};
})
However, when applied on elements to show/hide based on its value, it does not work as expected:
<div class="row" root-scope>
<div class="panel callout radius" ng-show="!userLoggedIn">
Additionally:
<form name="listForm" root-scope
novalidate ng-submit="listForm.$valid && model.save()"
ng-show="userLoggedIn">
Why is the value not appearing in the scope? When inspecting Angular scope in Chrome, the variable is not present. It can be found in the $parent as expected though.
UPDATE
If $root.userLoggedIn is used, it correctly references the property. However, the view does not respond to changes in the value. For instance, upon page reload, it starts off as false, but after Facebook login finishes, it switches to true; however, the view remains unchanged.