0

在尝试嵌入的时候,我想看看需要某个父指令控制器的被嵌入指令在被嵌入到所需的父项下后是否能够找到它。我使用的指令如下: 有一个 ParentOfParent 指令,它具有 transclude:true。有一个指令 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 使用它时,一切正常。

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

4

1 回答 1

0

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

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

var linkedClone = $transcludeFn();

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

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

在指令范围的子范围内编译克隆并在调用其所有链接函数之前传递克隆

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

于 2015-08-02T06:25:18.807 回答