Инициализация углового вложенного контроллера

0

У меня есть простое угловое приложение с главным контроллером и дочерним контроллером. Maincontroller загружает страницу входа в систему и при успешном входе в систему, страница с приветствием загружается с использованием дочернего контроллера. Приложение простое и работает. Моя проблема заключается в том, чтобы установить имя пользователя в журнале после успешного входа.

.controller('mainController', function($rootScope, $location, Auth) {

    var vm = this;
    vm.loggedinUser = Auth.getActiveUser();
    console.log(">>>>>>   ", vm.loggedinUser);

    //check to see user is logged in for every request made
    $rootScope.$on('$routeChangeStart', function() {
        vm.loggedIn = Auth.isLoggedIn();

    });

Моя страница html проста:

<body ng-app="bookapp" ng-controller="mainController as main">
..
<li class="navbar-text">Hello {{ main.loggedinUser }}! >

Проблема заключается в том, что значение loggedinUser не отображается.

1) Для его работы я должен инициализировать значение loggedinUser в прослушителе маршрутизации. (Перемещение линии в работу слушателя). Почему это так?

2) Также обратите внимание, что оператор console.log печатает реальное значение после входа в систему и когда отображается страница приветствия. Но значение переменной устанавливается в основном контроллере во время самой загрузки приложения (страница входа в систему) и может быть изменено только через прослушиватель изменений маршрута. Он не повторно инициализируется во время загрузки страницы приветствия.

Теги:

1 ответ

0

Вы можете либо передать объектную ссылку на контроллер, либо использовать службу $ watch, чтобы оценить функцию getActiveUser каждый дайджест и обновить область управления.

angular.module("bookapp", []);

angular.module("bookapp").controller("mainCtrl", function(Auth) {
  var vm = this;
  vm.userData = Auth.data;
  vm.login = function() {
    Auth.data.loginTimeStamp = new Date();
    Auth.data.user = "TestUser";
  };
});

angular.module("bookapp").factory("Auth", function() {
  var data = {
    loginTimeStamp: null,
    user: null,
  };

  return {
    data: data
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>


<body ng-app="bookapp">

  <div ng-controller="mainCtrl as main">
    <p>Hello {{ main.userData.user }}!</p>
    <button ng-click="main.login()">Log In</button>
  </div>


</body>

angular.module("bookapp", []);

angular.module("bookapp").controller("mainCtrl", function($scope, Auth) {
  var vm = this;
  $scope.getUser = Auth.getActiveUser;

  vm.login = function() {
    Auth.setActiveUser("TestUser");
    debugger;
  };
  $scope.$watch(function(scope) {
    return scope.getUser();
  }, function(newValue) {
    vm.loggedinUser = newValue;
    debugger;
  });
});

angular.module("bookapp").factory("Auth", function() {
  var data = {
    loginTimeStamp: null,
    user: null,
  };

  return {
    getActiveUser: function() {
      return data.user;
    },
    setActiveUser: function(userName) {
      data.user = userName;
    }
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>


<body ng-app="bookapp">

  <div ng-controller="mainCtrl as main">
    <p>Hello {{ main.loggedinUser }}!</p>
    <button ng-click="main.login()">Log In</button>
  </div>


</body>
Поделиться
  • 0
    Спасибо попробую это. Но почему не работает простая инициализация внутри основного контроллера?
  • 0
    При первой загрузке приложения вы не вошли в систему, и loggedinUser назначается по значению. После входа в систему свойство loggedinUser никогда не обновляется. Как уже упоминалось, вы можете передать ссылку, используя объект, или добавить часы на возвращаемое значение сервисной функции.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню