在不克隆的情况下使用嵌入时的奇怪行为答案

【问题标题】：Odd behavior when using transclusion without cloning在不克隆的情况下使用嵌入时的奇怪行为
【发布时间】：2015-07-31 19:35:11
【问题描述】：

在尝试嵌入的时候，我想看看需要某个父指令控制器的被嵌入指令在被嵌入到所需的父项下后是否能够找到它。我使用的指令如下：有一个具有 transclude:true 的 ParentOfParent 指令。有一个指令 Parent 嵌入到 ParentOfParent 指令模板中有一个 Child 指令需要 Parent 控制器，并且被 ParentOfParent 嵌入为 Parent 指令的子指令。

    'use strict';
angular
    .module('angularlabApp', [
    'ngRoute',
])
    .config(function ($routeProvider) {
    $routeProvider
        .when('/', {
        templateUrl: 'main.html',
        controller: 'MainCtrl'
    })
        .otherwise({
        redirectTo: '/'
    });
});

'use strict';
angular.module('angularlabApp')
    .directive('parent', function () {
    return {
        controller: function () { },
        restrict: 'EA',
        link: function postLink(scope, element, attrs) {
            console.log('Parent Link');
        }
    };
});

'use strict';

angular.module('angularlabApp')
  .directive('parentOfParent', function () {
    return {
      template: '<div id="prnt" parent></div>',
      transclude: true,
      restrict: 'EA',
      link: function(scope, element, attrs,_,transcludeFn){
        console.log('POP Link');
        element.find('#prnt').append(transcludeFn());

      }
    };
  });


'use strict';

angular.module('angularlabApp')
  .directive('child', function () {
    return {
      template: '<div></div>',
      restrict: 'EA',
      require:'^parent',
      link: function postLink(scope, element, attrs) {
        console.log('Child Link');
      }
    };
  });


'use strict';
angular.module('angularlabApp')
    .controller('MainCtrl', function ($scope) {
});

我遇到的是使用包含和不包含克隆的嵌入函数之间的奇怪差异。当我使用嵌入函数输出（不传递 cloneFn）时，我收到一个错误，即子指令无法在其上方找到父控制器。 http://plnkr.co/edit/JteQpPMc6nbVNjRDHVZ2

但是，当我通过传递 cloneFn 使用它时，一切正常。

transcluded 指令在插入到控制器所属的指令下方后是否有可能找到所需的控制器？

【问题讨论】：

是的，这就是行为 - 因为在嵌入的内容链接时，它不在所需的父级下，所以require: "parent" 会抛出错误。问题是什么？显然，正如您所提到的，是可能的 - 将元素放在 cloneAttachFn 中，这发生在链接之前
我试图了解使用克隆和原始内容之间的区别。为什么它适用于克隆的内容而不适用于原始内容
这不是“克隆”与“原始”的问题 - 这是预链接内容与后链接内容的问题。这是我对类似问题的回答 - stackoverflow.com/a/29911348/968155
@NewDev 很好的答案，虽然你能详细说明一下吗？也许解释一下在这两种情况下都在寻找父控制器的位置？据我了解，当 cloneFn 被传递时，内容在回调完成运行后被链接，这与使用嵌入函数输出的情况相反。在后一种情况下，返回的模板已经链接。对吗？
不确定我是否完全理解你的问题，但从你的自我回答来看，你似乎理解了这个问题。正在链接时查找控制器。 cloneFn 是一个在链接之前将克隆的内容放入 DOM 的机会，因此 require 之类的东西可以正常工作

标签： javascript angularjs directive angularjs-ng-transclude

【解决方案1】：

感谢this的回答和this的文章，我终于明白是什么原因造成的了。

当使用 transclude 函数的输出时（不传递克隆回调），输出已经编译并LINKED。

var linkedClone = $transcludeFn();

由于链接已经发生，复制的指令已经在寻找父指令的控制器。由于复制的 DOM 节点仍处于分离状态，因此无法找到它。

相反，当通过clone回调接收到复制的DOM子树时，如文章所述：

在指令作用域的子作用域中编译克隆，并在调用其所有链接函数之前传递克隆

因此，您有机会在复制的 DOM 子树被链接之前附加它，这样当它已经在 DOM 中时，它可以在其上方查找控制器。

【讨论】：