Как обновить угловые контроллеры при перенаправлении маршрута

Question

Я разрабатываю backoffice, с угловым, HTML & jQuery, чтобы иметь одностраничное приложение. Я использую аутентификацию пользователя. Я создал файл cookie для «сеанса пользователя», и я могу его уничтожить при выходе пользователя из системы. Но я работаю с Bootstrap, и у меня есть раскрывающееся меню с именем пользователя и меню слева, и я хочу скрыть их, когда пользователь отключен.

У меня есть один контроллер для каждого меню, и если я его выполню, он скроет то, что я хочу.

Пример:

.controller('SessionController', ['$scope', '$http', '$location', '$cookies', function ($scope, $http, $location, $cookies) { 
      if (typeof $cookies.userSession === "undefined") { 
       $(".nav.navbar-nav.navbar-right").hide(); 
       $location.path("/"); 
      } else { 
       $("#userLogin").text($cookies.userSession); 
       $(".nav.navbar-nav.navbar-right").show(); 
       $location.path("/customers"); 
      } 
     }]) 

Я что-то около $ scope.digest() и $ scope.apply() читать, но я не могу это сделать. Может быть, с директивой?

Answer 1

Я делаю что-то очень похожее с моим последним приложением, но вы не обновляете контроллер. Это больше мышления в стиле jQuery. Вы хотите использовать нг-шоу/нг скрытие, и установить правильный ВАР в контроллере:

<div ng-show="user.loggedIn"><a href="/logout" ng-click="logout()">Logout</a></div> 
<div ng-show="!user.loggedIn"><a href="/login">Login</a></div> 

(Вы можете так же легко поместить выпадающее меню внутри выше DIV)

Тогда ваш контроллер должен иметь

.controller('SessionController', function ($scope,AuthSvc) { 
     $scope.user = AuthSvc.user; 
     $scope.logout = function() {AuthSvc.logout();}; 
    }); 

Когда пользователь выходит из системы, просто установите AuthSvc.user.loggedIn в false, и он будет наследоваться по всем направлениям. Это красота двухсторонних привязок.

.factory('AuthSvc',function() { 
    return { 
    user: {loggedIn:false}, 
    logout : function() { 
     // do whatever other logout stuff you need, like deleting sessions 
     this.user.loggedIn = false; 
    }, 
    login : function() { 
     // do whatever other login stuff you need, like validating with the server 
     this.user.loggedIn = true; 
    } 
    }; 
}); 

Answer 2

Я уверен, что существует много способов добиться того, что вы действительно пытаетесь сделать (что показывает/скрывает материал, а не реконструирует контроллер). Простейшим, вероятно, является создание свойства isLoggedIn по объему и использование директивы ng-show/ng-hide. Или вы можете отделить вход в свой собственный шаблон и использовать ng-include, чтобы показать форму входа или реальный контент.

---

Чтобы адресовать вашу заботу о печенье и перезагрузке: Вы просто не думать в Angular :) Установка печенья может быть полезны на несколько страниц или через перезагрузку страницы. Однако, если вы хотите использовать функцию Angular для автоматического обновления отображаемого контента на основе базовых данных (без перезагрузки страницы), вам необходимо изменить базовые данные. Я имею в виду, что вам нужно создать свойство на $scope, например isLoggedIn, и обновить его, когда вы настраиваете файл cookie.

Answer 3

если вы используете UI-маршрутизатор, вы можете легко заставить перегрузите:

.controller('SessionController', ['$scope', '$http', '$location', '$cookies','$state', function ($scope, $http, $location, $cookies,$state) { 
      if (typeof $cookies.userSession === "undefined") { 
       $(".nav.navbar-nav.navbar-right").hide(); 
       $state.go('home',{},{reload:'true'}); 
      } else { 
       $("#userLogin").text($cookies.userSession); 
       $(".nav.navbar-nav.navbar-right").show(); 
       $state.go('customers',{},{reload:'true'}); 
      } 
     }]) 

Пожалуйста, обратите внимание, что этот фрагмент кода с использованием состояния home и customers, которые должны быть определены Somwhere еще.