Question

我想设置页面标题，该标题根据路线而变化。我的意思是响应式标题。

我的模块中有一条指令：

mainModule.directive("pageTitle", function($state){
return {
    restrict: 'A',
    template: "{{title}}",
    scope: {title: '=title'},
    link: function (scope, elem, attr) {
        scope.title=$state.current.data.title; //wrap this in $watch
        console.log('page state',$state.current.data.title);
    }
  } 
})

在我的main.cshtml中，我的标题标记中包含以下title指令：

<title><page-title title="{{$state.current.data.title}}"></page-title></title>

我的配置文件中有stateProvider：

$stateProvider
        .state('a-management', {
            name: 'aManState',
            url: '/a-management',
            template: '<div license-a permissions = permissions></div>',
            data: {title: 'A Management'}
        })
        .state('b-management/bs', {
            url: '/b-management/bs',
            template: '<b-management current-user = currentUser permissions = permissions></b-management>',
            data: {title: 'B Management'}
        })

我也使用了ui-sref-active="active"。一切看起来都很好，但是当我运行网站时，它不起作用。我打开控制台，查看所拥有的内容，看起来它可以达到 $ state （通过状态服务），但其 current 属性为空。

为什么我的代码无法达到当前水平，所以current.data也是如此？我有什么想念的吗？

Answer 1

我将抛出另一种解决方案，您无需使用指令（可能有兴趣也可能没有兴趣，但这就是我要做的）。我本质上有一个运行命令，该命令侦听状态更改，然后根据传递给该状态的title变量通过根范围更新页面标题。从那里开始，页面标题（index.html）绑定到根范围中的标题。

app.js

// Insert code here 
app.run(function ($rootScope) {
    $rootScope.$on('$stateChangeSuccess', function (event, toState) {
        $rootScope.title = toState.title || 'Default Title';
});


// Insert code here
.state('', {
    url: '/',
    title: 'Random Title'
}

index.html

    <head>
    <title ng-bind="title">Default Title</title>
    </head>

希望这有道理并能帮助您吗？

Answer 2

在最新版本的UI-Router中，您可以使用 Transition Hooks （docs here）来获得该结果：

您可以将page-title.directive.js编写为：

mainModule.directive("pageTitle", function(){
return {
    restrict: 'A',
    template: "{{title}}",
    scope: {},
    controller: function ($scope, $transitions) {
        $transitions.onSuccess({}, function (transition) {
            //
            $scope.title = transition.to().title; // Your current state's title
        });
    }
  } 
})

您的状态定义为：

$stateProvider.state('myState', {
    url: '/',
    title: 'My State Title',
    ...
})

如果不是最后一次获得结果的机会，请始终尝试避免访问（或继续使用） $ rootScope 。

希望有帮助。

Answer 3

感谢大家的帮助，在这个问题上cwbutler的回答解决了这个问题。

[Set Page title using UI-Router

无法访问$ state或$ state.current

3 个答案: