我在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()时,它的值是未定义的。
也许我错误的隔离范围值(=和@)。
谢谢你阅读。