I have main.cshtml file 它有一个包含css和js引用的head标签。
我有两个指令/模板。 我想有不同的两个标题。当页面 1 打开(有模板 1(时,我希望页面的标题是页面 1。 当页面 2 打开(有模板 2(时,我希望页面的标题是第 2 页。
我试图将头标签放在指令中,但它不读取标题和标题图标。
<div style="height: 100%">
<head>
<title>{{::title}}</title>}}
<link rel="shortcut icon" href="../../../../icons/icon1.ico">
</head>
<div class="..." >
<div class="...">
<div>...............
它既不能那样工作,要么 head 标签在主div 上。
我尝试使用路由,在路由中给出标题属性,但在配置文件中无法读取 rootScope。
所以我尝试用模块运行((。但它也没有用。
module.run(function($rootScope){
$rootScope.$on("$routeChangeSuccess", function(currentRoute,
previousRoute){
//Change page title, based on Route information
$rootScope.title = $route.current.title; }) ;});
你能帮忙吗,我怎么能有这两个不同的标题和图标。或者,如果必须是两个不同的头标签才能看到它们,我该如何创建它们?
对于您的特定用例,我没有很多信息可以继续, 但是我们像这样以编程方式设置标题:
$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 路由器进行路由。