用户登录时动态显示侧边栏视图/模板？

Question

我正在开发一个具有基本注册/登录功能的网络应用程序，每个页面上都会出现一个导航栏，以及各种其他功能的多个视图。我正在使用ui.router作为我的路由和Bootstrap用于我的样式和网格。

我想添加一些功能，一旦用户登录，就会在每个视图的侧面显示侧边栏。所有视图都可供用户使用，无论他们是否登录，但边栏将不会出现，除非他们已登录。我试图实现这几种方式，最后决定使用ui.router的多视图功能来完成它虽然我无法正常工作，但下面列出了我最新的代码。

当前实施：

在我的routeConfig中，每个州都有侧边栏视图和内容视图。侧边栏视图的templateUrl应为null（如果用户已注销）或sidebar.html的位置（如果用户已登录）。就目前而言，这根本不起作用，只是完全打破了这些状态。

“内容”视图都加载了ng-class函数，这些函数根据用户是否登录动态更改其引导网格间距，以便该部分正常工作。

的index.html

<!-- snip -->
<div class="container">

  <div ui-view="sidebar"></div>
  <div ui-view="content"></div>

</div>
<!-- snip -->

app.routes.js

(function() {
  'use strict';

  angular
    .module('app', ['ui.router', 'ui.bootstrap']);
    .config(routeConfig);

  function routeConfig($stateProvider, $urlRouterProvider, userFactoryProvider) {
    $urlRouterProvider.otherwise('/');

    $stateProvider
      .state('main', {
        url:'/main/',
        views: {
          'sidebar': {
            templateUrl: function() {
              return userFactoryProvider.getSidebarLink()
            }
          }
          'content': {
            templateUrl: 'app/components/main/main.html',
            controller: 'MainController as main'
          }
        }
      })
      /* snip - other states */
  }
})();

user.factory.js

(function() {
  'use strict';

  angular
    .module('app')
    .factory('userFactory', userFactory);

  function userFactory() {
    var _loggedIn = false;
    // will be either null or the location of sidebar.html depending on if user is _loggedIn or not
    var _sidebarLink = null;

    var service = {
      getSidebarLink: getSidebarLink
      // snip - other functions
    };
    return service;

    // snip - login/logout functions that modify _loggedIn

    function getSidebarLink() {
      if (_loggedIn) {
        _sidebarLink = 'app/components/navbar/sidebar.html'
      }
      // null if not logged in, sidebar.html's location if logged in
      return _sidebarLink;
    }

  }

})();

Answer 1

我在边栏上放了一个ng-show：

<div ui-view="sidebar" ng-show="loggedIn"></div>

在主控制器中设置此loggedIn值。

这可以通过观察loggedIn事件来完成，或者如果您不想通过观察用户登录的任何服务来使用事件（不知道原因）。

活动：

$rootScope.$on('loggedIn', function(){
    $scope.loggedIn = true;
});

$rootScope.$on('loggedOut', function(){
    $scope.loggedIn = false;
});

观赏：

$scope.UserService = UserService;
$scope.$watch('UserService.isLoggedIn()', function (newVal) {
  $scope.loggedIn = newVal;
});