Question

我需要Angular应用中的侧边栏。侧边栏应该出现在每个视图中，但是一个，登录视图（可能还有其他一些，如注册）。

目前，侧边栏是一个视图，包含在index.html：

中

＆＃13;

<div ng-include src="'assets/partials/sidebar.html'"></div>

＆＃13;

最好的方法是什么？

（我使用的是ui-router。）

Answer 1

您似乎需要ngRoute或UIRouter。

这些将允许您为应用中的给定URL定义视图行为。

例如，如果您想为＆＃39; / login＆＃39;定义路线（使用ngRoute）和＆＃39; / dashboard＆＃39;，它可能如下所示：

angular.module('ngRouteExample', ['ngRoute'])

 .controller('MainController', function($scope) {
     // Do stuff...
 })

.controller('DashboardController', function($scope, $routeParams) {
     // Do Stuff...
 })

 .controller('LoginController', function($scope, $routeParams) {
     // Do Stuff...
 })

 .config(function($routeProvider, $locationProvider) {
   $routeProvider
   .when('/dashboard', {
    templateUrl: 'dashboard.html',
    controller: 'DashboardController',

  })
  .when('/login', {
    templateUrl: 'login.html',
    controller: 'LoginController'
  })
});

在你的index.html中：

<div ng-view></div>

然后，您可以创建一个单独的指令，如：

<sidebar></sidebar>

并将其包含在dashboard.html中，但不包含在login.html

中

修改

如果您的布局允许，您可以在index.html中包含侧边栏一次，并使用ng -f渲染或不渲染它，如果基于您通过检查$ routeParams设置的范围变量。

在这种情况下，您的主控制器＆＃39;看起来像这样：

.controller('MainController', function($scope, $route, $routeParams, $location) { $scope.showSidebar = function(){ if($routeParams.paramName == 'login'){ return false; }else{ return true; } }; })

然后在index.html

<sidebar ng-if="showSidebar()"></sidebar>

Answer 2

所以我想你想避免在你制作的每个视图中都包含侧栏？

也许是这样的？

在路线文件中，您可以创建一个额外的参数，如下所示：

$stateProvider
          .state('login', {
              url: '/login',
              templateUrl: '/App/tpl/login.html',
              hideSideBar: true
          })

然后您可以在控制器/指令中访问，如下所示：

$state.current.hideSideBar;

这样，您可以在主布局中包含侧边栏，并在设置为true时隐藏它，如下所示：

<div id="sidebar" data-ng-hide="controller.hideSideBar">
  .... your sidebar
</div>

（这些都是从内存中写的所以它可能无法直接开箱即用，但它应该让你开始）

AngularJS：在登录（和注册）视图中隐藏补充工具栏

2 个答案: