Question

我想在视图上方显示视图名称基本上，我正在寻找像

这样的东西

<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”属性？

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>

正确显示视图名称的方法

1 个答案: