无法访问 $state 或 $state.current答案

【问题标题】：can't access $state or $state.current无法访问 $state 或 $state.current
【发布时间】：2018-09-28 11:49:03
【问题描述】：

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

我的模块中有一个指令：

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><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，所以 current.data 也是？有什么我错过的吗？

【问题讨论】：

可能重复stackoverflow.com/questions/17215656/…
@Jignesh Joisar 我已经做了积极的事情
创建一个独立的作用域，做类似scope.state = $state的事情，然后把{{state.current.name}}放到模板里
嗨@codergirrl，我在这里添加了一条评论stackoverflow.com/a/52538794/91017，关于如何使用$stateChangeSuccess 监听器来做到这一点

标签： angularjs routing frontend state directive

【解决方案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>

希望这是有道理的，可以帮助你吗？

【讨论】：

谢谢你，但它仍然无法正常工作，没有给出错误，仍然无法获得标题太奇怪了T_T
什么部分没有得到标题？我想我也应该问一下你用的是哪个版本的ui-router？
任何页面都没有标题。 "angular-ui-router": "^1.0.20"
因此，仅出于调试目的，您可能需要记录并确保在更改页面时捕获 stateChange。您还需要确保正确绑定标题。因此，假设您在整个应用程序中有某种类型的父控制器，您将需要在其中设置 title 变量
stateChange 没有被捕获，因为我放了 console.log 并且没有输出

【解决方案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。

希望对你有帮助。

【讨论】：

这段代码非常好，但它也不起作用。再次没有错误没有标题...
确保你声明了你的指令。没有错误让我首先想到这种疏忽。
你说的太对了，指令不起作用。我喜欢的是真的：{{title}}
你应该使用它作为：
。在模板中使用时，请记住将指令名称转换为“虚线”名称。
还是不行。我猜在这部分transition.to().title 找不到标题。但我不知道为什么。

【解决方案3】：

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

[Set Page title using UI-Router

【讨论】：