时间戳

首页 > 解决方案 > 无法访问 $state 或 $state.current

angularjs - 无法访问 $state 或 $state.current

问题描述

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

我的模块中有一个指令：

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

标签： angularjsroutingfrontendstatedirective

解决方案

我只是要抛出另一个解决方案，您不需要使用指令（可能感兴趣也可能不感兴趣，但这就是我所做的）。我基本上有一个运行命令，它监听状态变化，然后根据传递给状态的标题变量通过根范围更新页面标题。从那里，页面标题 (index.html) 绑定到根范围内的标题。

应用程序.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'
}

索引.html

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

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

推荐阅读