AngularJS-指令的链接函数中的访问隔离范围

一尘不染

AngularJS-指令的链接函数中的访问隔离范围

angularjs

我首先尝试使用AngularJS自定义指令。

我在指令的链接功能中使用（或理解…）隔离范围时遇到麻烦。

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

view.html

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

request 是在viewCtrl范围内发布的变量，其中包含请求的xml字符串。

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()它时，其值是不确定的。

也许我对隔离的范围值（=和@）错了。

感谢您的阅读。:)

阅读 178

2020-07-04

共1个答案

一尘不染

与绑定的隔离范围属性@在链接函数中不立即可用。您需要使用$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);
}

但是，在这种情况下，由于要使用模板中的属性，因此应使用@。

如果您不使用模板，则@在属性值包含{{}}s
时很有用–例如，title="{{myTitle}}"。然后使用的需求就$observe变得更加明显：您的链接函数可能希望每次myTitle更改值时都做一些事情。

2020-07-04