javascript - 在 AngularJS 中，我可以在 ngView 之外的 ngSwitch 中使用当前路由吗

Question

我正在尝试根据当前视图更改页眉。标头在 ngView 之外。这是可能的还是我需要将标题放在视图中？

我的代码与此类似：

<div id="header">
    <div ng-switch on="pagename">
        <div ng-switch-when="home">Welcome!</div>
        <div ng-switch-when="product-list">Our products</div>
        <div ng-switch-when="contact">Contact us</div>
    </div>
    (a lot of unrelated code goes here)    
</div>

<div id="content>
    <div ng-view></div>
</div>

Answer 1

Give each route a name when you are defining it. Then inject $route into the controller, then have the controller publish it into the current scope. You can then bind the ng-switch to $route.current.name

Answer 2

您可以注入$location服务并检查$location.path(). http://docs.angularjs.org/api/ng.$location

JS：

function Ctrl($scope, $location) {
  $scope.pagename = function() { return $location.path(); };
};

HTML：

<div id="header">
  <div ng-switch on="pagename()">
    <div ng-switch-when="/home">Welcome!</div>
    <div ng-switch-when="/product-list">Our products</div>
    <div ng-switch-when="/contact">Contact us</div>
  </div>
</div>

Answer 3

解决这个问题的一个很好的方法是在你的控制器中注入 $route 然后用它来获取当前的路由名称。

app.controller('YourController', function($scope, $route){
    $scope.pagename = $route.current.$$route.name;
});

你必须像下面这样命名你的路线：

app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/product-list', {
        templateUrl: 'views/product-list.html',
        controller: 'ProductsController',
        name: 'product-list'
      }).
      when('/home', {
        templateUrl: 'views/home.html',
        controller: 'HomeController',
        name: 'home'
      }).
      otherwise({
        redirectTo: '/'
      });
  }]);

因此，当您加载路由时，控制器将读取当前路由名称并将其传递给您的 pagename 变量中的视图。然后视图将拾取它并根据需要显示正确的视图。

希望能帮助到你 ：）

Answer 4

似乎它将是标题和内容的不同控制器。控制器之间通信的最佳方式是服务。另一种方式 - 事件。请参阅 Vojta 答案。