0

我有 main.cshtml 文件它有一个包含 css 和 js 引用的 head 标签。

我有两个指令/模板。我想有不同的两个标题。当 page1 打开（有 template1）时，我希望页面的标题为 Page-1。当 page2 打开（有模板 2）时，我希望页面的标题为 Page-2。

我试图将头部标签放到指令中，但它没有读取标题和标题图标。

<div style="height: 100%">
     <head>
       <title>{{::title}}</title>}}
       <link rel="shortcut icon" href="../../../../icons/icon1.ico">
     </head>    
<div class="..." >
    <div class="...">
        <div>...............

它既不能这样工作，也不能在主 div 上使用 head 标签。

我尝试使用路由，在路由中给出标题属性但在配置文件中 rootScope 无法读取。

所以我尝试用模块运行（）。但它也没有奏效。

module.run(function($rootScope){
      $rootScope.$on("$routeChangeSuccess", function(currentRoute, 
      previousRoute){
     //Change page title, based on Route information
     $rootScope.title = $route.current.title;  })  ;});

你能帮忙我怎么能有这两个不同的标题和图标。或者如果必须是两个不同的头部标签才能看到它们，我该如何创建它们？

4

1 回答 1

0

对于您的特定用例，我没有太多信息可以继续，但我们以编程方式设置标题，如下所示：

$document.prop('title', title);

您可以在$stateChangeSuccess.

在此示例中，您在状态定义中定义标题并在状态更改时更新它：

var module = angular.module('someModule', ['ui.router']);

module.run(function($rootScope, $stateProvider, $document) {
  // use ui-router additional route data to configure the title of the state
  $stateProvider.state('someState', {
    url: 'someUrl',
    controller: 'SomeCtrl',
    templateUrl: 'some.tpl.html',
    data: {
      title: 'Your states title goes here'
    }
  });

  $rootScope.$on("$stateChangeSuccess", function(event, currentState) {
    //Change page title, based on title found in route definition
    $document.prop('title', currentState.data.title);
  });
});

此示例假设您使用 ui-router 进行路由。

于 2018-09-27T13:58:21.400 回答