Angularjs 角度UI路由器设置范围/变量_Angularjs_Routing_Angular Ui Router

Angularjs 角度UI路由器设置范围/变量

angularjs routing

Angularjs 角度UI路由器设置范围/变量,angularjs,routing,angular-ui-router,Angularjs,Routing,Angular Ui Router,我有一个Angular应用程序，使用Ui路由器进行路由。每次我更改路由器时，我都想更改页面的标题，而$stateProvider似乎是最简单的方法。我为$stateProvider提供了类似的内容： $stateProvider .state('index', { url: "/", views: { "rightContainer": { templateUrl: "viewA.html" }, },

我有一个Angular应用程序，使用Ui路由器进行路由。每次我更改路由器时，我都想更改页面的标题，而$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>


{{data.header}

您可以使用数据或者只是另一种方法

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

.state

对象有一个

数据

属性，用于准确描述您试图实现的目标。只需将

数据：{header:“header 1”}

添加到。

状态

如下：

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

编辑/更新

要访问页面标题等的

数据

，最好对

index.html

使用一个

控制器

，并在路由更改事件中使用

$scope.$on

将更改推送到

$scope.header

。我建议您查看一下项目样板文件，以获得一个工作示例

HTML

也许使用数据会更好这似乎是一条路，但我该如何访问它呢。按照医生建议的方式做是行不通的。控制器（“mainCtrl”，函数（$scope，$state）{var header=$state.current.data.header；}请看这里的答案：换句话说，您可能可以通过向控制器添加$state作为参数，然后通过$state.current.data.header访问它来获得它

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

.controller( 'AppCtrl', function AppCtrl ( $scope, $location ) {
    $scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
    if ( angular.isDefined( toState.data.header ) ) {
        $scope.header = toState.data.header;
    }
});