I know this is long, but it seems that something specific in what I am doing in a more complex scenario is causing the problem. All simple examples I try to work fine.
I have install an application using angular and laravel four.
The home page is displayed using laravel routing:
Route::get('/', function() { return View::make('app'); });
app.php returns a website skeleton with the following structure:
<!doctype html> <html lang="en" ng-app="app"> <head> <script src="/js/angular.js"></script> <script src="/js/angular-sanitize.js"></script> <script src="/js/angular-ui-router.js"></script> <script src="/js/app.js"></script> </head> <body> <div class="navbar navbar-inverse navbar-fixed-top" ng-controller="NavController"> <div class="navbar-inner"> <div class="container-fluid"> <button class="button pull-right" ng-click="logout()">Logout</button> <p class="navbar-text pull-right" > Logged in as <a href="#" class="navbar-link">{{ currentUser.email }} id is : {{ currentUser.userId }}</a> </p> </div> </div> </div> </div> <div class="row-fluid offset05"> <div id="view" ng-view></div> </div> </div> </body> </html>
app.js basics:
var app = angular.module("app", ['ngSanitize','ui.state','ui.bootstrap']);
the user is initially redirected to the login template, after which LoginController updates the user information located in the UserService.
app.controller("LoginController", function($scope,$rootScope, $location, AuthenticationService, UserService) { $scope.credentials = { email: "", password: "" }; $scope.login = function() { AuthenticationService.login($scope.credentials).success(function() { $location.path('/home'); }); }; });
The authentication service automatically updates the UserService variable:
app.factory("AuthenticationService", function($rootScope, $http, $sanitize, SessionService, FlashService, CSRF_TOKEN, UserService) { return { login: function(credentials) { var login = $http.post("/auth/login", sanitizeCredentials(credentials)); login.success(function(data){ UserService.currentUser = data.user; }); return login; } });
The NavController (the controller for the navigation bar shown above) associates its area with UserService.currentUser.
app.controller("NavController",function($scope, UserService, AuthenticationService,$location){ $scope.currentUser = UserService.getCurrentUser(); });
Relevant parts of UserService:
app.factory("UserService", function($http){ var _currentUser = {} return{ currentUser: _currentUser, getCurrentUser: function() { return _currentUser;} };
});
When a user logs in, their user email and user ID should appear in the navigation bar.
If I create an example that strictly uses javascript / html, there are no binding problems.
With the above mechanics / structure, the navigation bar does not respond to changes in the current user variable UserService until the whole page is reloaded.
After the user logs in, I can verify that the UserController and UserService update currentUser accordingly. Despite this, NavController will not display the updated user unless I reload the entire page.
I assume this is due to the fact that NavController is now restarting with updated information, but why does normal binding not work?
I assume this is due to the navigation bar loading via php.
My question is: how can I: a) properly bind the required work, or b) restart the NavController if necessary (after logging in / out)