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

前端之家收集整理的这篇文章主要介绍了AngularJS – 在指令的链接功能中访问隔离范围前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在AngularJS自定义指令中首先尝试。

在指令的link函数中使用(或理解…)隔离范围时遇到困难。

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

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()时,它的值是未定义的。

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

谢谢你阅读。

猜你在找的Angularjs相关文章