无法访问 $state 或 $state.current

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 中，我在 head 标签中有这个标题指令：

<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

我将抛出另一个不需要使用指令的解决方案（可能感兴趣也可能不感兴趣，但这就是我所做的）。我基本上有一个运行命令，它监听状态变化，然后根据传递到状态的标题变量通过根范围更新页面标题。从那里开始，页面标题 (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 you can use 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

can't access $state or $state.current

angularjs

routing

frontend

state

directive