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

我想在视图上方显示视图名称
基本上，我正在寻找类似的东西

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

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

(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"
      });
  });

}());

我在视图外显示视图名称的原因是，每次更改视图时，都不会从DOM中删除容器(在本例中为)，否则会闪烁。
我使用正确的方法吗？如何到达$ routeProvider中的“name”属性？

最佳答案

您可以执行以下操作-通过附加到$routeChangeStart事件并将当前路由名称放在$ rootScope上。

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

然后，您可以在HTML中执行以下操作:

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