当前位置: 首页>>WEB开发>>正文


AngularJS – 在指令的链接功能中访问隔离范围

沐阳 WEB开发 , 去评论

问题描述

我在AngularJS自定义指令中首先尝试。

我在使用(或理解…)指令的链接功能中的孤立范围时遇到困难。

这是我应用程序这部分的代码:

view.html

...
<raw-data id="request-data" title="XML of the request" data="request">See the request</raw-data>
...

request是一个发布在viewCtrl范围内的变量,它包含一个请求的xml-string。

rawData.js

directives.directive('rawData', function() {

    return {
        restrict : 'E',
        templateUrl : 'partials/directives/raw-data.html',
        replace : true,
        transclude : true,
        scope : {
            id : '@',
            title : '@',
            data : '='
        },
        link : function($scope, $elem, $attr) {
            console.log($scope.data); //the data is correclty printed
            console.log($scope.id); //undefined
        }
    };
});

raw-data.html

<div>
    <!-- Button to trigger modal -->
    <a href="#{{id}}Modal" role="button" class="btn" data-toggle="modal" ng-transclude></a>

    <!-- Modal -->
    <div id="{{id}}Modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="{{id}}Modal" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">{{ title }}</h3>
        </div>
        <div class="modal-body">
            <textarea class="input-block-level" rows="10">{{ data }}</textarea>
        </div>
        <div class="modal-footer">
            <!-- <button class="btn" ng-click="toggleTagText('')">{{'cacher'}} l'image</button> -->
            <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Fermer</button>
        </div>
    </div>
</div>

我不明白为什么ID是相关的,当模态弹出时显示,但是当我尝试console.log()它的值是未定义的。

也许我错误的隔离范围值(=@)。

谢谢你的阅读。 🙂

最佳解决方法

@绑定的隔离范围属性在链接函数中不能立即可用。您需要使用$observe

$attr.$observe('id', function(value) {
   console.log(value);
});

您的模板正常工作,因为Angular会为您自动更新隔离范围属性id。当它更新时,你的模板也会自动更新。

如果你只是传递字符串,你可以简单地评估一次值,而不是使用@绑定:

link: function($scope, $elem, $attr) {
    var id    = $attr.id;
    var title = $attr.title
    console.log(id, title);
}

但是,在您的情况下,由于要使用模板中的属性,因此应使用@

如果您不使用模板,则当属性值包含{{}}(例如title="{{myTitle}}")时,@非常有用。那么需要使用$observe变得更加明显:每次myTitle的值改变时,链接功能都可能要做一些事情。

次佳解决方法

这是有意的,与编译顺序和’@’和’=’之间的区别有关。

this Google Groups discussion with input from Misko的一些摘录:

@ and = do very different things. One copies the attribute value (which may be interpolated) and the other treats the attribute value as an expression.

@attrs are not $interpolated until later, so they are not available at link time. If you want to do something with them in the link function you either need to $interpolate yourself manually

参考文献

注:本文内容整合自google/baidu/bing辅助翻译的英文资料结果。如果您对结果不满意,可以加入我们改善翻译效果:gxnotes#qq.com(#替换为@)。

本文由《共享笔记》整理, 博文地址: https://gxnotes.com/article/192131.html,未经允许,请勿转载。
Go