Question

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

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

第二个导航栏是指用户被路由到/ signin页面。 enter image description here

我不确定如何解决这个问题。我看到了很多不同的方法可以做到这一点，但没有一个能解释当我选择另一条路线时如何更改整个标题视图。他们只是展示了如何更改其中包含的链接。像this Stack

一样

如何将标题路由到/ signin页面时切换标题？

另外，我正在与另一个与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 - 在视图更改时切换导航栏

2 个答案: