Within my app, I have integrated a navbar directive along with basic sign up/log in features. My intention is to modify certain phrases on the navigation bar (such as 'signup/login' changing to 'sign out') once a user logs in. However, I am facing difficulty in determining the most effective method to achieve this. I attempted to set the variable/binding value that needs to be changed to a factory, which gets updated upon user login. Unfortunately, this approach did not yield the desired results as the directive failed to update with the new value.
Below is the snippet of code I have been working with. While specific solutions are welcome, I would greatly appreciate any guidance pointing me towards the right direction on how to tackle this issue.
Strategies I've experimented with:
- Factories
- Assigning binding variables to factory variables that undergo updates
- Assigning binding variables to the outcome of getter functions for those variables
- Cookies (preferable avoidance unless there's a convincing argument)
- Assigning binding variables to values stored within cookies
Regrettably, none of these methods led to the dynamic update of the directive variable. Though I believe the solution might be straightforward, I seem to be missing the right approach.
Potential Solutions:
- Utilizing routing, such as switching between different views of the navbar when a user signs in. Though it seems somewhat cumbersome
- $rootScope (not quite sure of its usage here and suspect it might not be the ideal solution)
navbar.html
<nav class="navbar navbar-static-top navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#/">
<span class="glyphicon glyphicon-star"></span> Home
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-6">
<ul class="nav navbar-nav">
<li><a ui-sref="message">Message</a></li>
<li><a ui-sref="list">User List</a></li>
<li><a ui-sref="schedule">Schedule</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a ng-href="{{ vm.accountStatusLink }}">{{ vm.accountStatus }}</a></li>
</ul>
</div>
</div>
</nav>
navbar.directive.js
(function() {
'use strict';
angular
.module('app')
.directive('mainNavbar', mainNavbar);
mainNavbar.$inject = ['userFactory'];
function mainNavbar(userFactory) {
var directive = {
restrict: 'E',
templateUrl: 'app/components/navbar/navbar.html',
scope: {
creationDate: '='
},
controller: NavbarController,
controllerAs: 'vm',
bindToController: true
};
return directive;
function NavbarController() {
var vm = this;
// solution 1 (doesn't work)
vm.accountStatus = userFactory.userStatus;
vm.accountStatusLink = userFactory.userStatusLink;
// solution 2 (doesn't work)
//vm.accountStatus = userFactory.getUserStatus();
//vm.accountStatusLink = userFactory.getUserStatusLink();
}
}
})();
user.factory.js
(function() {
'use strict'
angular
.module('app')
.factory('userFactory', userFactory);
userFactory.$inject = ['$http', '$cookies'];
function userFactory($http, $cookies) {
var userStatusLink = '#/user/';
var userStatus = 'Sign Up / Log In';
var service = {
verifyUser: verifyUser,
storeUser: storeUser,
userStatusLink: userStatusLink,
userStatus: userStatus
};
return service;
/* verifyUser() snip */
function storeUser(user) {
$cookies.putObject('user', user); // stores user obj in cookies
userStatusLink = '#/signout/';
userStatus = 'Sign Out';
}
/* solution 2 getters
function getUserStatus() {
return userStatus;
}
function getUserStatusLink() {
return userStatusLink;
}
*/
}
})();
Update:
The call userFactory.storeUser(user) occurs asynchronously inside a .success callback:
$http.post('someurl').success(function(user) {
userFactory.storeUser(user);
});