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

Question

我正在第一次尝试 AngularJS 自定义指令。

我在使用(或理解...)指令的链接函数中的隔离范围时遇到问题。

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

查看.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
        }
    };
});

原始数据.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()它时，它的值是未定义的。

也许我对隔离范围值的理解是错误的(= 和 @)。

感谢您的阅读。 :)

Answer 1

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

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

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

如果您只是传递字符串，则只需对值求值一次，而不是使用 @ 绑定(bind):

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

但是，在您的情况下，由于您想使用模板中的属性，因此应该使用 @。

如果您没有使用模板，则当属性值包含 {{}} 时，@ 非常有用 – 例如，title="{{myTitle }}"。那么使用 $observe 的需求就变得更加明显:您的链接函数可能希望在每次 myTitle 的值发生变化时执行某些操作。