根據文檔，無法在 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 。 每當您在指令上使用scope: {}選項時，它都會創建一個僅限於該指令的范圍。

您有兩個選項可以幫助解決此問題。

1. 您可以創建沒有scope:{}選項的指令，這將允許指令完全訪問存在於父頁面上的scope 。 這里的缺點是這將指令的使用限制為每個范圍的單個實例。
2. 在 scope 選項中創建一個綁定並將變量從 HTML 傳遞給指令

指令： scope: {title: '=title'}

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