Question

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

我有以下HTML

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

我有两个指令。我想要转换my-directive的内容，并能够访问名为＆＃34; myDivName＆＃34;的变量。来自为transcluded元素创建的范围。该变量从变量＆＃34; theName＆＃34;获取其内容。在＆＃34; my-directive＆＃34;的隔离范围内;指令。

这是我的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', function(){
      return {
        restrict: 'E',
        scope: {
          name: '='
        },
        template: '<div>{{name}}</div>'
      }
    });

正如您所看到的，我在＆＃34; my-directive＆＃34;中使用链接函数的transclude参数。指令为变量＆＃34; myDivName＆＃34;设置正确的值;在被抄涵的范围内。但是，该代码仅在Javascript替换了＆＃34; my-directive＆＃34;中的标签中的内容后执行。并允许我按照我想要的方式追加被抄送内容的人克隆（我可以访问他们的范围，所以没有问题）。

输出的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>

问题是第一次在＆＃34; my-directive＆＃34;中的标签中插入的内容。如何访问第一个转录克隆的范围？

有一个简单的方法＆＃34;这样做，它是揭示＆＃34; my-directive＆＃34;的隔离范围的变量。像这篇文章建议ngModel needs $parent when within Transcluded html，但我不想挤占＆＃34; my-directive＆＃34;的主范围。有这些变数。

Answer 1

我建议不要在模板中使用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>',
link: function(scope, element, attrs, ctrl, 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>',
link: function(scope, element, attrs, ctrl, transclude){
  var e = element.find('ng-transclude');
  transcludeScope = e.scope();
  transcludeScope.myDivName = scope.theName;

});

此解决方案使用jqLite查找ngTransclude，然后调用scope（）方法以获取转换范围。

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

1 个答案:

如果您真的想要ngTransclude