0

トランスクルージョンを少し試しながら、特定の親ディレクティブ コントローラーを必要とするトランスクルージョンされたディレクティブが、必要な親の下でトランスクルージョンされた後にそれを見つけることができるかどうかを確認したかったのです。私が使用したディレクティブは次のとおりです。 Transclude:true を持つ ParentOfParent ディレクティブがあります。ParentOfParent ディレクティブ テンプレートに組み込まれているディレクティブ Parent があります。Parent コントローラを必要とする Child ディレクティブがあり、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 ディレクティブが必要なコントローラーを見つけることさえ可能ですか?

4

1 に答える 1

0

この回答とこの記事のおかげで、最終的に違いの原因がわかりました。

transclude関数の出力が (クローン コールバックを渡さずに) 使用される場合、出力は既にコンパイルされ、LINKEDになっています。

var linkedClone = $transcludeFn();

リンクはすでに行われているため、コピーされたディレクティブはすでに親ディレクティブのコントローラーを探しています。コピーされたDOMノードはまだ切り離されているため、見つけることができません。

逆に、記事で説明されているように、コピーされた DOM サブツリーが clone コールバックを介して受信された場合:

ディレクティブのスコープの子スコープでクローンをコンパイルし、そのすべてのリンク関数を呼び出す前にクローンを渡します

したがって、リンクされる前にコピーされた DOM サブツリーをアタッチする機会が得られるため、既に DOM にある場合にその上のコントローラーを探すことができます。

于 2015-08-02T06:25:18.807 に答える