AngularJS - 在指令的链接函数中访问隔离范围 [英] AngularJS - Access isolated scope in directive's link function

问题描述

我第一次尝试使用 AngularJS 自定义指令.

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

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

view.html

<预><代码>...<raw-data id="request-data" title="请求的XML" data="request">查看请求</raw-data>...

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

rawData.js

directives.directive('rawData', function() {返回 {限制:'E'，templateUrl : 'partials/directives/raw-data.html',替换:真的，转置:真实，范围 : {ID : '@'，标题 : '@'，数据:'='},链接:函数($scope，$elem，$attr){console.log($scope.data);//数据正确打印控制台日志($scope.id)；//不明确的}};});

原始数据.html

<!-- 触发模态的按钮--><a href="#{{id}}Modal" role="button" class="btn" data-toggle="modal" ng-transclude></a><!-- 模态--><div id="{{id}}Modal" class="modal hidefade" 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 class="modal-body"><textarea class="input-block-level" rows="10">{{ data }}</textarea>

<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>

我不明白为什么模式弹出时显示的 ID 是正确的，但是当我尝试 console.log() 它时，它的值是未定义的.

也许我对隔离范围值(= 和 @)有误解.

感谢您的阅读.:)

解决方案

与 @ 绑定的隔离作用域属性在链接函数中不会立即可用.您需要使用 $observe:

$attr.$observe('id', function(value) {控制台日志(值)；});

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

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

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

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

如果您没有使用模板，那么当属性值包含 {{}}s – 时，@ 很有用.例如，title="{{myTitle}}".然后使用 $observe 的需要变得更加明显:每次 myTitle 的值发生变化时，您的链接函数可能想要做一些事情.

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.

Here is the code of this part of my app :

view.html

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

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

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>

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 @).

Thank you for reading. :)

解决方案

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

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

However, in your case, since you want to use the properties in templates, you should use @.

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屋！