如何为我的两个指令添加不同的头两个标签或不同的头信息答案

【问题标题】：how to add different head two tags or different head information for my two directive如何为我的两个指令添加不同的头两个标签或不同的头信息
【发布时间】：2018-09-27 13:06:27
【问题描述】：

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

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

我试图将 head 标签放到指令中，但它不读取标题和 icon-for-title。

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

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

【问题讨论】：

标签： angularjs angularjs-directive head ico angularjs-templates

【解决方案1】：

对于您的具体用例，我没有太多信息可以继续，但我们像这样以编程方式设置标题：

$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 进行路由。

【讨论】：

我有一个 stateProvider。我可以使用 $routeChangeSuccess
我添加了一个功能更全面的例子，这是你在使用 ui-router 时可以做到的
谢谢，但它说 $stateProvider 没有定义，页面视图消失了。我的路由器文件的配置和模块是分开的，也许我混淆了一些东西......
在你定义这个模块的地方，你可能忘记包含对 ui-router 的依赖。我在示例中添加了模块定义