使用透传而不克隆时的奇怪行为

Odd behavior when using transclusion without cloning

本文关键字:      更新时间:2023-09-26

在尝试透传的同时,我想看看需要某个父指令控制器的透传指令是否能够在所需的父指令下被透传后找到它。我使用的指令如下:有一个ParentOfParent指令,它有translude:true。有一个指令Parent被嵌入到ParentOfParent指令模板中有一个需要父控制器的子指令,并且被ParentOfParent转换为父指令的子指令。

    '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) {
});

我所遇到的是一个奇怪的差异在使用transclusion函数与不克隆。当我使用透传函数输出(不传递cloneFn)时,我得到一个错误,即子指令无法在上面找到父控制器。http://plnkr.co/edit/JteQpPMc6nbVNjRDHVZ2

然而,当我通过传递cloneFn来使用它时,一切都工作了。

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

多亏了这个答案和这篇文章,我终于明白了造成差异的原因。

当使用transclude函数的输出(不传递克隆回调)时,输出已经编译并且链接

var linkedClone = $transcludeFn();

因为链接已经发生了,被复制的指令已经在寻找父指令的控制器。由于复制的DOM节点仍然是分离的,因此无法找到它。

相反,当通过克隆回调接收复制的DOM子树时,如本文所述:

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

因此,您有机会在它被链接之前附加复制的DOM子树,从而允许它在它已经在DOM中时查找它上面的控制器。

相关文章:
  • 没有找到相关文章