如何在angular js中的ui-state更改后维护母版页中使用的控制器的范围变量？

Question

I have a master page(Index.html) in which I'm using

<div>
  <ul class="nav navbar-nav navbar-right">
    <li><a ui-sref="signout.searchAsset"> Sign Out</a></li>
    <li><a ui-sref="signin.searchAsset"> Sign In</a></li>
    <li><a href="#"></a></li>
    <li><h4 >Headset - Signin  ({{$scope.UserFullname}})</h4></li>                   
  </ul>
</div>
<div class="container">
<!-- views will be injected here -->
<div ui-view></div>

</div>

Script.js file-->

angular.module('aegis', ['ngAnimate', 'ui.router', 'ngSignaturePad', 'ngDialog', 'ui.select', 'ngStorage'])



// configuring our routes 
// =============================================================================
.config(function ($stateProvider, $urlRouterProvider) {

    $stateProvider

        // route to show our basic form (/form)
        .state('signout', {
            url: '/signout',
            templateUrl: 'app/components/headset/view-signout-form.html',
            controller: 'SignoutController'
        })

        // nested states 
        // each of these sections will have their own view
        // url will be nested (/form/profile)
        .state('signout.searchAsset', {
            url: '/searchAsset',
            templateUrl: 'app/components/headset/view-signout-search-asset.html'
        })
        // url will be /signout/searchEmployee
         .state('signout.searchEmployee', {
            url: '/searchEmployee',
            templateUrl: 'app/components/headset/view-signout-search-employee.html')          
         .state('index', {
            url: '/index',
            templateUrl: 'index.html'  
           Controller : 'loginController'
          })
           .controller('SignoutController', function ($scope, $http, $state, ngDialog, $location, $window, appConfig, $localStorage, AuthService) {   

            $scope.formData = {};
            $scope.formData.accepted = false;
             $scope.formData.assetFound = false;   

          }).controller('LoginController', function ($scope, $http, $state, appConfig, $localStorage, AuthService) {
  $scope.UserFullname = AuthService.CurrentSession().Fullname;
           AuthService.getSession();    
           $scope.login = function () {
           AuthService.login($scope.username, $scope.password);
         }     

});

When i first login my page goes to index.html then the value in $scope.UserFullname id displayed but when i click on any link(Sign in),the state changes and the value in $scope.UserFullname is empty. How can i maintain the value in $scope.UserFullname even if the state changes?

Answer 1

Hello into your login state you can use resolve and return a promise of your service ( authentication service ) with the username .
You can do a resolve that calls your authentication service on each 'state' of your application, so you can inject it and use it on each controller.

Like this:

 .state('index', {
            url: '/index',
            templateUrl: 'index.html'  
           Controller : 'loginController',
           // Example using function with returned promise.
           // This is the typical use case of resolve.
           // You need to inject any services that you are
           // using, e.g. $http in this example
           user:  function($http){
            // $http returns a promise for the url data like username
            return $http({method: 'GET', url: '/someUrl'});
         },
          })

inject resolve object into your controller:

.

controller('LoginController', function (user, $scope, $http, $state, appConfig, $localStorage, AuthService) {
  //the returned promise of state 'index' (**user**), is injected into that controller 
  $scope.UserFullname = user;
});

Hope helps , good luck.