Question

我有一个使用Ui路由器进行路由的Angular应用程序。每次我更改路由器，我想更改页面的标题，似乎$ stateProvider将是最简单的方法。 $ stateProvider我有类似的东西：

$stateProvider
    .state('index', {
        url: "/",
        views: {
            "rightContainer": { templateUrl: "viewA.html" },
        },
        controller: function ($scope) {
            $scope.data.header = "Header 1"
        }
    })
    .state('details', {
        url: "/details",
        views: {
            "rightContainer": { templateUrl: "ViewB.html" },
        },
        controller: function ($scope) {
            $scope.data.header = "Header 2"
        }
    });

然后我想要标题：

    <div data-ng-controller="mainCtrl">
                <div class='bg'>{{data.header}}</div>
    </div>

Answer 1

您可以使用数据https://github.com/angular-ui/ui-router/wiki#attach-custom-data-to-state-objects 或者只是另一种方法

.run(function ($state,$rootScope$filter,WindowUtils) {
        $rootScope.$state = $state;
        $rootScope.$on('$stateChangeSuccess', function(event, toState) {
            var stateName = toState.name;
            //switch 
            WindowUtils.setTitle(stateName);
         });
    })
    .factory('WindowUtils', function($window) {
        return {
            setTitle:function(title){
                var sep = ' - ';
                var current = $window.document.title.split(sep)[0];
                $window.document.title = current + sep + title;
            }
        };
    })

Answer 2

.state对象具有data属性，正是您尝试实现的目标。只需将data: {header: "Header 1"}添加到。state，就像这样：

$stateProvider
.state('index', {
    url: "/",
    views: {
        "rightContainer": { templateUrl: "viewA.html" },
    },
    data: {header: "Header 1"}
})

修改/更新

要访问data以获取页面标题等，如果您对controller使用一个index.html <head>，则最佳，并使用$scope.$on将更改推送到{{1}路线改变事件。我建议您查看https://github.com/ngbp/ngbp项目样板文件以获取工作示例。

<强> HTML

https://github.com/ngbp/ngbp/blob/v0.3.2-release/src/index.html

$scope.header

<强> app.js

https://github.com/ngbp/ngbp/blob/v0.3.2-release/src/app/app.js

<html ng-app="myApp" ng-controller="AppCtrl"> <head> <title ng-bind="header"></title> ... </head>

Angular UI路由器设置范围/变量

2 个答案: