Angular UI-Router不更改标题

时间:2017-03-15 13:39:09

标签: javascript jquery html angularjs angular-ui-router

我有代码,我正在试图找出拥有自己标题的网页的最佳方式。目前在index.html中它设置标题,并且每个页面都会自动继承标题。

index.html代码段

<!DOCTYPE html>
<html>
<head>
    <title>My Application</title>

...

问题出于某种原因,我无法转到其他网页并在<title>This Window Section</title>中输入<head>,因为它仍会说“我的应用程序”#34;。我已经阅读过,可以将标题添加到$stateProvider,它会改变它,但也不会更改标题。

applicationUIRoutes.js摘要

app.config(function($stateProvider, $urlRouterProvider) {
    ...
    $stateProvider.state("application.graph", {
         url: "/graph",
         views: {
             templateUrl: "apps/graph.html",
             controller: "graphController",
             controllerAs: "graphCtrl"
        },
        title: "Graph", // <-- Doesn't do anything. Page still says 'My Application'
    }

...
}

graph.html代码段

<head>
    <title>Graph</title> <!-- Doesn't work -->

...

graphController.js中设置它并使用ng-init在html中调用它的工作原理是什么。我不想这样做(而且我很确定这很可怕而且#34; hacky&#34;)。

graphController.js代码段

... 

function _setWindowTitle(title) {
    document.title = title;
}

...

graph.html代码段

<head>
    <div ng-init="graphCtrl.setWindowTitle("Graph");"></div> <!-- Works -->

...

有没有办法维持默认的index.html标题并且能够覆盖它而不用我的hacky方式?我最好想在我的applicationUIRoutes中进行此操作,但我可以在页面中输入<title> title of something </title>并正确覆盖index.html

- 更新的ATTEMPTS -

我已尝试按照Set Page title using UI-RouterUpdating title tag using AngularJS and UI-Router作为指南,并添加了以下内容:

applicationModule.js

var app = angular.module("myApp, [ " ..
]);

app.run(['$rootScope', '$state', '$stateParams', function($rootScope, $state, $stateParams) {
    $rootScope.$state = $state;
    $rootScope.$state = $stateParams;
}]);

applicationUIRoutes.js摘要

app.config(function($stateProvider, $urlRouterProvider) {
    ...
    $stateProvider.state("application.graph", {
         url: "/graph",
         views: {
             templateUrl: "apps/graph.html",
             controller: "graphController",
             controllerAs: "graphCtrl"
        },
        data: " { pageTitle: "Graph Test" }
    }

...
}

graph.html代码段

<head>
    <title ng-bind="$state.current.data.pageTitle></title>

但它仍然没有改变标题。我注意到的一件事可能是问题是在浏览器中检查实际代码时,它在<head>中显示标题是&#34;我的应用程序(来自index.html)。如果我搜索我创建的标题被放置在身体的某个地方......

<div class="ng-scope" ui-view="">
    <title class="ng-scope"> Graph Title </title>
</div> 

不确定为什么会发生这种情况。我想这是使用视图时代码的结构,但我尝试在applicationUIRouter的不同部分添加标题,但它仍然没有改变。

0 个答案:

没有答案