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

Question

我想在第一次将嵌入元素插入到具有独立范围的指令中的标记中时访问它的范围。我可以使用 transclude 函数访问被嵌入元素的克隆，但不是第一次插入元素。

我有以下HTML

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

我有两个指令。我想嵌入 my-directive 的内容，并能够从为嵌入元素创建的范围访问名为 "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', function(){
      return {
        restrict: 'E',
        scope: {
          name: '='
        },
        template: '<div>{{name}}</div>'
      }
    });

如您所见，我在 "my-directive" 指令中使用 link 函数的 transclude 参数来为被嵌入范围内的变量 "myDivName" 设置正确的值。但是，该代码仅在 Javascript 替换了 "my-directive" 中标记中的内容后才执行，并允许我根据需要附加已嵌入内容的人工克隆（我可以访问它们的范围，所以没有问题).

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"标签中第一次插入的内容。我如何访问第一个嵌入的克隆的范围？

有一个"easy way"的做法，就是暴露"my-directive"的隔离作用域的变量，像这样post建议，但是我没有' 想用这些变量挤满 "my-directive" 的父作用域。

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()方法来获取transclusion作用域。

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

Access the scope of the ng-transclude tag in the markup

angularjs

angularjs-ng-transclude

如果你真的想要 ngTransclude