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

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

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

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

view.html

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

request是在viewCtrl的范围内发布的变量,其中包含请求的xml-string。

rawData.js

  1. directives.directive('rawData',function() {
  2.  
  3. return {
  4. restrict : 'E',templateUrl : 'partials/directives/raw-data.html',replace : true,transclude : true,scope : {
  5. id : '@',title : '@',data : '='
  6. },link : function($scope,$elem,$attr) {
  7. console.log($scope.data); //the data is correclty printed
  8. console.log($scope.id); //undefined
  9. }
  10. };
  11. });

raw-data.html

  1. <div>
  2. <!-- Button to trigger modal -->
  3. <a href="#{{id}}Modal" role="button" class="btn" data-toggle="modal" ng-transclude></a>
  4.  
  5. <!-- Modal -->
  6. <div id="{{id}}Modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="{{id}}Modal" aria-hidden="true">
  7. <div class="modal-header">
  8. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  9. <h3 id="myModalLabel">{{ title }}</h3>
  10. </div>
  11. <div class="modal-body">
  12. <textarea class="input-block-level" rows="10">{{ data }}</textarea>
  13. </div>
  14. <div class="modal-footer">
  15. <!-- <button class="btn" ng-click="toggleTagText('')">{{'cacher'}} l'image</button> -->
  16. <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Fermer</button>
  17. </div>
  18. </div>
  19. </div>

我不明白为什么当模态弹出时,ID是相关的,但是当我尝试使用console.log()时,它的值是未定义的。

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

谢谢你阅读。

猜你在找的Angularjs相关文章