angularjs – 访问标记中ng-transclude标记的范围

发布时间：2020-12-17 18:04:33 所属栏目：安全来源：网络整理

导读：我想第一次将它插入带有隔离范围的指令中的标记中来访问已转换元素的范围.我可以使用transclude函数访问transcluded元素的克隆,但不是第一次插入元素. 我有以下HTML my-directive the-name="'John Doe'" my-div name="myDivName"/my-div/my-directive 我有两

我想第一次将它插入带有隔离范围的指令中的标记中来访问已转换元素的范围.我可以使用transclude函数访问transcluded元素的克隆,但不是第一次插入元素.

我有以下HTML

<my-directive the-name="'John Doe'">
   <my-div name="myDivName"></my-div>
</my-directive>

我有两个指令.我想要转换my-directive的内容,并能够从为transcluded元素创建的作用域中访问名为“myDivName”的变量.该变量从“my-directive”指令的隔离范围中的变量“theName”获取其内容.

这是我的Javascript代码：

var app = angular.module('test',[]);
    app.directive('myDirective',function(){
      return {
        restrict: 'E',template: '',transclude: true,scope:{
          theName: '='
        },template: '<div>Hello I am My Directive and this content goes BEFORE the transclude<br><ng-transclude></ng-transclude><p>This element goes after the transclude</p></div>',link: function(scope,element,attrs,ctrl,transclude){
          transclude(function (clone,transcludeScope) {
          transcludeScope.myDivName = scope.theName;
          element.append(clone);//This line shouldn't be here. I just put it to illustrate that this clone has the right value in the output.
        });
        }
      }
    });
    app.directive('myDiv',scope: {
          name: '='
        },template: '<div>{{name}}</div>'
      }
    });

如您所见,我在“my-directive”指令中使用link函数的transclude参数为转换范围中的变量“myDivName”设置正确的值.但是,该代码只执行AFTER Javascript替换了“my-directive”中标签中的内容,并允许我按照我想要的方式追加转换内容的man克隆(我可以访问它们的范围,所以没有问题).

输出的HTML

<html>
<head>
</head>
<body ng-app="test" class="ng-scope">
<my-directive the-name="'John Doe'" class="ng-isolate-scope">
  <div>Hello I am My Directive and this content goes BEFORE the transclude<br>
  <ng-transclude>
    <!-- This is the very first time the transcluded element is inserted. 
    I want access to its scope just like I have access to the clone's scope in the transclude function. -->
    <my-div name="myDivName" class="ng-scope ng-isolate-scope">
      <div class="ng-binding">
      </div>
    </my-div>
  </ng-transclude>

  <p>This element goes after the transclude</p></div>
  <!-- This is a clone which scope was correctly modified to set the variable -->
  <my-div name="myDivName" class="ng-scope ng-isolate-scope">
    <div class="ng-binding">John Doe</div></my-div>
  </my-directive>    
</body>
</html>

问题是第一次在“my-directive”中的标签中插入了内容.如何访问第一个转录克隆的范围？

这样做有一个“简单的方法”,就是要公开“my-directive”的孤立范围的变量,就像这篇文章建议ngModel needs $parent when within Transcluded html,但我不想挤满“my-directive”的父范围有这些变数.

解决方法

我建议不要在模板中使用ngTransclude. ngTransclude与预隔离范围(转换范围)相关联,您是对的 – 您无权访问它.

相反,使用transclude函数,并自己插入克隆：

template: '<div>Hello I am My Directive and this content goes BEFORE the transclude<br><insert-here></insert-here><p>This element goes after the transclude</p></div>',transclude){
  transclude(function (clone,transcludeScope) {
  transcludeScope.myDivName = scope.theName;
  var e = element.find('insert-here');
  e.append(clone);        
});

如果你真的想要ngTransclude

或者,如果您真的想在模板中使用ngTransclude,那么以下内容应该有效：

template: '<div>Hello I am My Directive and this content goes BEFORE the transclude<br><ng-transclude></ng-transclude><p>This element goes after the transclude</p></div>',transclude){
  var e = element.find('ng-transclude');
  transcludeScope = e.scope();
  transcludeScope.myDivName = scope.theName;

});

此解决方案使用jqLit??e查找ngTransclude,然后调用scope()方法以获取转换范围.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!