angular - 视图改变时切换导航栏

Question

我正在使用 angular-route。min.js 我的导航栏有两种设计。

第一个是登陆页面导航栏，它将首先出现在我的 index.html 上。

第二个导航栏是当用户被路由到 /signin 页面时。

我不确定该怎么做。我看到有很多不同的方法可以做到这一点，但是 none 确实解释了在选择另一条路线时我如何更改整个 header 视图。他们只是展示了如何更改其中包含的链接。喜欢this Stack

如何在路由到 /signin 页面时关闭 header？

另外，我正在与另一个使用 Django 做后端的人一起工作。这就是为什么我将“{{ }}”更改为“[[ ]]”的原因。

var app = angular.module('app', ['ui.bootstrap', 'ngRoute']);

app.config(function($interpolateProvider, $routeProvider) {
  $interpolateProvider.startSymbol('[[');
  $interpolateProvider.endSymbol(']]');

  $routeProvider

    .when('/', {
    templateUrl: 'pages/LandingPage.html',
  })

  .when('/signin', {
      templateUrl: 'pages/SignIn.html'
    })
    .when('/contact', {
      templateUrl: 'pages/contact.html'
    });
});

<!DOCTYPE html>
<html lang="en" data-ng-app="app">

<head>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js">
  </script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular-route.js">
  </script>
</head>

<body>
  <div ng-view></div>
</body>

</html>

Answer 1

我认为 ng-include 指令可以解决您面临的情况。

在控制器代码中。

.controller('HeaderCtrl', function($scope, $location) {
    $scope.$on('$locationChangeSuccess', function(/* EDIT: remove params for jshint */) {
        var path = $location.path();
        //EDIT: cope with other path
        $scope.templateUrl = (path==='/signin' || path==='/contact') ? 'template/header4signin.html' : 'template/header4normal.html' ;
    });
})

在Html.

<body>
    <div ng-controller="HeaderCtrl">
        <div ng-include="templateUrl"></div>
    </div>
    <div ng-view></div>
</body>

希望对您有所帮助。 :)

Answer 2

你的两个 navbars 差别不大。另一种方法是使用 ng-class 和 ng-show 来提供不同的样式。

例如，在 navbar.html:

<nav>
    <span ng-show="isNormalPage">Inn</span>
    <img ng-class="{align-center: isNormalPage}">Logo</img>
    <span ng-show="isNormalPage">Sing in</span>
</nav>

在您的 JS 文件中，添加一个标记来标记 singin 页面：

.when('/signin', {
  controller: [$scope, function ($scope) {
      $scope.isNormalPage = false;
    };
  }]
})

angular - 视图改变时切换导航栏

angular - Switch navbar when view is changed

navbar

twitter-bootstrap

angularjs

angular-routing