根据文档,无法访问angular ui-router中的$ state.current.data

Question

我正在尝试动态更新页面标题.

考虑一个如此定义的状态:

 $stateProvider.state('login', {
        url: '/login',
        templateUrl: '/templates/views/login.html',
        controller: 'AuthCtrl',
        data: {title: 'Log in'}
 }

在页面HEAD部分:

<title page-title></title>

根据文档,我应该能够访问我的自定义数据属性:

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

    }
});

但这会回来undefined.有任何想法吗？谢谢!

Answer 1

该变量确实可用于页面,但在您的指令中,您已创建了一个隔离的范围.无论何时scope: {}在指令上使用该选项,它都会创建一个仅限于指令的范围.

您有两个选项可以帮助解决此问题.

1. 您可以在没有scope:{}选项的情况下创建指令,这将允许指令完全访问scope父页面上存在的指令.这里的缺点是这限制了指令对每个范围的单个实例的使用.
2. 在scope选项中创建一个绑定,并将该变量从HTML传递给指令

指示: scope: {title: '=title'}

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