由网友(遗失的旧时光)分享简介：我试图动态更新页面的标题。I am trying to dynamically update the page title.考虑一个国家确定这样的：Consider a state defined thus:$stateProvider.state('login', {url: '/login',template...

我试图动态更新页面的标题。

I am trying to dynamically update the page title.

考虑一个国家确定这样的：

Consider a state defined thus:

 $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);
        }

    }
});

但是，这将返回未定义。有任何想法吗？谢谢！

But this returns undefined. Any ideas? Thanks!

推荐答案

变量确实可用的页面，但在你的指令，你已经创建了一个的隔离范围。每当你使用范围：{} 选项的指令，它会创建它仅限于该指令的作用域。

The variable is indeed available to the page, but in your directive, you have created an isolated scope. whenever you use the scope: {} option on a directive, it creates a scope which is limited to the directive only.

您有两种选择，这将有助于解决这一问题。

You have two options which will help to solve this issue.

您可以创建指令，而不范围：{} 选项，这将允许指令完全访问范围它存在父页面上。这里的缺点是，这限制了使用该指令的每个范围的单个实例。创建的作用域选项绑定和从HTML变量传递给指令 You can create the directive without the scope:{} option, which would allow the directive full access to the scope which exists on the parent page. The drawback here is that this limits the use of the directive to a single instance per scope. Create a binding in the scope option and pass the variable from the HTML to the directive

指令：范围是：{title：'=标题'}

HTML：＆LT;标题＆GT;＆LT;网页标题标题={{$ state.current.data.title}}＆GT;＆LT; /页标题＆GT;＆LT; /标题＆GT;