angularjs - 显示 View 名称的正确方法

Question

我想在 View 上方显示 View 名称
基本上，我正在寻找类似

的东西

<h1>{{viewName}}<h1>
<div ng-view=""></div>

我尝试了一些复杂的方法来从 $routeProvider 中获取 View 名称，但没有成功。
我的路由器看起来像这样

(function() {

  var app = angular.module("myModule", ["ngRoute"]);

  app.config(function($routeProvider) {
    $routeProvider
      .when("/view1", {
        name: "View One",
        templateUrl: "view1.html",
        controller: "View1Controller"
      })
      .when("/view2", {
        name: "View Two",
        templateUrl: "view2.html",
        controller: "View2Controller"
      })
      .otherwise({
        redirectTo: "/view1"
      });
  });

}());

我在 View 外显示 View 名称的原因是容器(在本例中)不会在每次 View 更改时从 DOM 中删除，否则它会闪烁。

我使用的方法是否正确？如何获取 $routeProvider 中的“name”属性？

Answer 1

您可以这样做 - 通过附加到 $routeChangeStart 事件并将当前路由名称放在 $rootScope 上。

angular.module('myModule', ['ngRoute']).run([
    '$rootScope',
    function ($rootScope) {
        $rootScope.$on('$routeChangeStart', function (event, next) {
            $rootScope.currentRoute = next;
        });
    }]);

然后在您的 HTML 中您可以这样做:

<span>{{currentRoute.name}}</span>