70

ディレクティブ Angular docsから、コンパイル関数には 3 つのパラメーターがあり、そのうちの 1 つがtransclude. ドキュメントが提供する唯一の説明は次のとおりです。

transclude - トランスクルード リンク関数: function(scope, cloneLinkingFn)。

クローン リンク機能で正確に何をするかを理解しようとしています。どのパラメーターが渡されるのかさえわかりません。HTML 要素のように見える1 つのパラメーターが呼び出された例を 1 つ見つけました。clone利用可能な他のパラメーターはありますか? これは正確にはどの HTML 要素ですか? また、おそらくtransclude: 'element'ディレクティブでの使用も検討しています。'element'の代わりにを使用すると、これらの質問に対する答えが変わりtrueますか?

簡単な例でトランスクルージョンを理解していますが、より複雑な例、特にtransclude: 'element'. 誰かがこのすべてについてより完全な説明を提供できることを願っています。ありがとう。

4

1 に答える 1

55

編集：これに答えたとき、私は完全に間違っていたので、私の答えを完全かつ完全に変更し、これを「コミュニティWiki」（私にとってはポイントがないことを意味します）としてマークします

@Jonahが以下で指摘したように、ディレクティブのコンパイルオプションとtransclusion関数の使用に関する非常に良い記事があります

基本的な考え方は、コンパイル関数がリンク関数を返す必要があるということです。リンク関数内で提供されるトランスクルージョン関数を使用して、トランスクルージョンされた DOM 要素のクローンを取得し、コンパイルして、挿入する必要がある場所に挿入できます。

これは、Plunker でお尻から引き抜いたより良い例です。

コンパイル関数の考え方は、リンク関数が作成されて呼び出される前に、渡された属性に基づいて DOM 要素をプログラムで変更できるようにすることです。

// a silly directive to repeat the items of a dictionary object.
app.directive('keyValueRepeat', function ($compile){
  return {
    transclude: true,
    scope: {
      data: '=',
      showDebug: '@'
    },
    compile: function(elem, attrs, transclude) {

      if(attrs.showDebug) {                
        elem.append('<div class="debug">DEBUG ENABLED {{showDebug}}</div>');
      }

      return function(scope, lElem, lAttrs) {
        var items = [];
        console.log(lElem);
        scope.$watch('data', function(data) {

          // remove old values from the tracking array
          // (see below)
          for(var i = items.length; i-- > 0;) {
            items[i].element.remove();
            items[i].scope.$destroy();
            items.splice(i,1);
          }

          //add new ones
          for(var key in data) {

            var val = data[key],
                childScope = scope.$new(),
                childElement = angular.element('<div></div>');

            // for each item in our repeater, we're going to create it's
            // own scope and set the key and value properties on it.
            childScope.key = key;
            childScope.value = val;

            // do the transclusion.
            transclude(childScope, function(clone, innerScope) {
              //clone is a copy of the transcluded DOM element content.
              console.log(clone);

              // Because we're still inside the compile function of the directive,
              // we can alter the contents of each output item
              // based on an attribute passed.
              if(attrs.showDebug) {                
                clone.prepend('<span class="debug">{{key}}: {{value}}</span>');
              }

              //append the transcluded element.
              childElement.append($compile(clone)(innerScope));
            });

            // add the objects made to a tracking array.
            // so we can remove them later when we need to update.
            items.push({
              element: childElement,
              scope: childScope
            });

            lElem.append(childElement);
          }
        });
      };
    }
  };
});
于 2012-11-01T20:22:03.470 に答える