AngularJS - 在指导的链接功能访问隔离范围 [英] AngularJS - Access isolated scope in directive's link function

问题描述

我给第一次尝试在AngularJS定制指令。

I'm giving a first try at AngularJS custom directives.

我在使用的麻烦（或理解...）该指令的链接功能的隔离范围。

I'm having trouble using (or understanding ...) the isolated scope in the link function of the directive.

下面是我的应用程序，这部分的code：

Here is the code of this part of my app :

view.html

view.html

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

要求发表在viewCtrl的范围变量包含请求的XML字符串。

request is a variable published in the scope of the viewCtrl that contains the xml-string of a request.

rawData.js

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

原始data.html

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 correclty所示，当模态持久性有机污染物，但是当我尝试的console.log（）它，它的价值是不确定的。

I don't understand why the ID is correclty shown when the modal pops, but when I try to console.log() it, its value is undefined.

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

Maybe i'm wrong with the isolated scope value (= and @).

感谢您的阅读。 ：）

推荐答案

隔离作用域属性不会立即在链接功能可用。您需要使用 $观察：

Isolate scope properties bound with @ are not immediately available in the linking function. You need to use $observe:

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

您模板工作正常，因为角自动更新隔离scope属性 ID 为您服务。而当它更新，模板自动更新了。

Your template works properly because Angular automatically updates isolate scope property id for you. And when it does update, your template automatically updates too.

如果你只是路过的字符串，你可以简单地评估一次，而不是使用 @ 绑定的值：

If you are just passing strings, you can simply evaluate the values once instead of using @ binding:

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

不过，在你的情况，因为你要在模板中使用属性，你应该使用 @ 。

如果你没有使用模板，那么 @ 是有用的，当属性值包含 {{}} 取值＆ndash的;例如，标题={{myTitle}}。那么就需要使用 $观察就更加明显了：你的链接功能可能希望每个时间 myTitle值改变。

If you weren't using templates, then @ is useful when attribute values contain {{}}s – e.g., title="{{myTitle}}". Then the need to use $observe becomes more apparent: your linking function may want to do something each time the value of myTitle changes.

这篇关于AngularJS - 在指导的链接功能访问隔离范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！