Angular.js: 角度1.2.18：トランスクルージョンのng-repeat問題

作成日 2014年06月17日 · 48コメント · ソース: angular/angular.js

ng-transcludeによってディレクティブに渡す場合、（ディレクティブに実装されたng-repeat = "item incollection"を介して）繰り返したい参照{{item}}を持つhtmlコンテンツはバージョン1.2.18では機能しません。

http://embed.plnkr.co/EvzF25sPD3uZLQivDFqy/preview

ソース

sergicontre

最も参考になるコメント

私がやったことは、 $parentを使用すること

だから私は次のようなものを持っています：

angular.module('test').directive('myDirectiveWithTransclusion', function() {
     return {
          restrict: 'E'
          transclude: {
               transcludeThis: 'transcludeThis'
          }
          template: "<div ng-repeat='item in array'><div ng-transclude='transcludeThis'></div></div>"
     }
})

<my-directive-with-transclusion>
     <transclude-this>
          {{$parent.item}}
     </transclude-this>
</my-directive-with-transclusion>

moneytree-doug 2016年05月04日

👍13 ❤8 🎉2

全てのコメント48件

ああ、ローディ。 @petebacondarwinはこれらの別の1

caitp 2014年06月17日

（多分）関連： https ：

Narretz 2014年06月17日

悲しいことに、これはng-transcludeトランスクルージョンが機能する方法ではありません。あなたがやろうとしているのは、あなた自身のディレクティブ内で何をスタンプアウトするかの「テンプレート」としてその子を利用するコンテナディレクティブを作成することです。

私は過去に何度かこれに遭遇し、それについてミスコと長い議論をしました。トランスクルージョンされるコンテンツは、定義上、ディレクティブがインスタンス化される場所のスコープにバインドされます。ディレクティブのテンプレートの範囲ではありません。

以前は、ネストされたトランスクルージョンシナリオが関係する場合に、実際にトランスクルージョンを間違ったスコープにバインドしていたため、これは機能していた可能性があります。

したがって、実際にここでトランスクルージョンを使用する必要はありません。実際に実行しようとしているのは、内部HTMLを独自のテンプレートに挿入することだけだからです。これは、次のようなコンパイル関数で実行できます。

http://plnkr.co/edit/j3NwMGxkVRM6QMhmydQC?p=preview

app.directive('test', function(){

  return {
    restrict: 'E',
    compile: function compile(tElement, tAttrs, tTransclude) {

      // Extract the children from this instance of the directive
      var children = tElement.children();

      // Wrap the chidren in our template
      var template = angular.element('<div ng-repeat="item in collection"></div>');
      template.append(children);

      // Append this new template to our compile element
      tElement.html('');
      tElement.append(template);

      return {
        pre: function preLink(scope, iElement, iAttrs, crtl, transclude) {
            scope.collection = [1, 2, 3, 4, 5];
        },
        post: function postLink(scope, iElement, iAttrs, controller) {
          console.log(iElement[0]);
        }
      };
    }
  };
});

petebacondarwin 2014年06月18日

👍1

これの別の例（私は信じています）：

Index.html：

<html ng-app='myApp'>

<head>
    <title>AngularJS Scopes</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
    <script src='index.js'></script>
</head>

<body ng-controller='myController'>
    <people>Hello {{person.name}}</people>
</body>
</html>

index.js：

var myApp = angular.module( 'myApp', [] );

myApp.controller( 'myController', function( $scope ) {
    $scope.people = [
        { name: 'Rob'  },
        { name: 'Alex' },
        { name: 'John' }
    ];
});

myApp.directive( 'people', function() {
    return {
        restrict: 'E',

        transclude: true,
        template: '<div ng-repeat="person in people" ng-transclude></div>',
    }
});

Angular 1.2.1で動作しましたが、1.2.18では動作しませんでした。

罪のない開発者は、上記のコードが機能することしか期待できませんでした。このドキュメントには次のように書かれています。

...文字列やオブジェクトではなく、テンプレート全体を渡すことができることが望ましい場合があります。「ダイアログボックス」コンポーネントを作成するとします。ダイアログボックスは、任意のコンテンツを折り返すことができる必要があります。

ngTranscludeのドキュメントには次のように書かれています。

トランスクルージョンを使用する最も近い親ディレクティブのトランスクルージョンされたDOMの挿入ポイントをマークするディレクティブ。このディレクティブが配置されている要素の既存のコンテンツは、トランスクルージョンされたコンテンツが挿入される前に削除されます。

これは@petebacondarwinの定義とどのように異なりますか？

...独自のディレクティブ内でスタンプアウトするものの「テンプレート」としてその子を利用するコンテナディレクティブを作成します

トランスクルージョンがここで正しい解決策ではない理由を私は本当に理解していません。どちらかといえば、合理的な解決策には、テンプレートスコープをトランスクルージョン関数に挿入することが含まれると思います。

Izhaki 2014年07月01日

違いは、トランスクルージョンされたコンテンツが「外部」、つまり<people>要素が見つかる場所のスコープにバインドされることです。
一方、必要なのは、インラインテンプレートを「内部」、つまりディレクティブのスコープにバインドすることです。
ディレクティブが独自のスコープを作成しない場合、これはほぼ同じです。たとえば、ディレクティブが分離スコープを作成する場合、それは間違いなく同じことではありません。内側のスコープは外側のスコープにアクセスできません。

petebacondarwin 2014年07月01日

テンプレートスコープをトランスクルージョン関数に実際に挿入する独自のディレクティブを作成できると思います...

petebacondarwin 2014年07月01日

http://plnkr.co/edit/IbNqR0854V8yXnajKSFB?p=previewを参照してください

petebacondarwin 2014年07月01日

あなたが言っていることは完全に理にかなっています-しかしそれはあなたがAngularの深さを理解している場合にのみです。私のポイントは、上記の例は、あまり余分な作業をしなくても、どういうわけか機能するはずだということです。

トランスクルージョン関数が何らかの方法でテンプレート（または「内部」）スコープにアクセスできるようにすることは、私には非常に合理的で非常に実用的であるように思われます。なぜこれが必要になるのか、多くの場合考えられます。

まったく同じ問題がこのブログで説明され

Izhaki 2014年07月01日

そして、コードをどうもありがとう。私は他の人の利益のためにここでそれを複製しています：

var myApp = angular.module( 'myApp', [] );

myApp.controller( 'myController', function( $scope ) {
    $scope.people = [
        { name: 'Rob'  },
        { name: 'Alex' },
        { name: 'John' }
    ];
});

myApp.directive( 'people', function() {
    return {
        restrict: 'E',
        transclude: true,
        template: '<div ng-repeat="person in people" inject></div>'
    }
});

myApp.directive('inject', function(){
  return {
    link: function($scope, $element, $attrs, controller, $transclude) {
      if (!$transclude) {
        throw minErr('ngTransclude')('orphan',
         'Illegal use of ngTransclude directive in the template! ' +
         'No parent directive that requires a transclusion found. ' +
         'Element: {0}',
         startingTag($element));
      }
      var innerScope = $scope.$new();
      $transclude(innerScope, function(clone) {
        $element.empty();
        $element.append(clone);
        $element.on('$destroy', function() {
          innerScope.$destroy();
        });
      });
    }
  };
});

Izhaki 2014年07月01日

👍9 ❤3

:-)私は、トランスクルージョンは、頭をかいたり、キーボードを叩いたりしない限り、理解しやすいトピックではないことに同意します。
おそらく、ng-transcludeがトランスクルージョンされたコンテンツを「外部」スコープにバインドするという事実について、ドキュメントをさらに明確にする必要がありますか？

petebacondarwin 2014年07月01日

個人的には、少なくともこの重要なページにある現在のドキュメントは、かなり明確で明確だと思い

このトランスクルージョンオプションは正確に何をしますか？ transcludeは、このオプションを使用してディレクティブのコンテンツが、ディレクティブの内部ではなく外部のスコープにアクセスできるようにします。

（そして、以下のすべてがこれをさらに説明します）。

おそらくあなたがフレームワークに提供したディレクティブを追加して、おそらくそれを「ng-transclude-internal」とブランド化することを検討しますか？「transcope」と呼ばれるディレクティブを使用して、これに挑戦した人が少なくとももう1人いることを私は知っています。

Izhaki 2014年07月01日

私は解決策を試しましたが、他の問題に直面しました。なぜng-repeatの親スコープがディレクティブのスコープではないのですか？

http://plnkr.co/edit/7j92IC?p=preview

luboid 2014年07月01日

@luboidプランカーで機能しない理由は、ディレクティブに分離スコープがあり、変更されたコンパイル済みDOM（ちなみに、これはこの問題を解決するためのばかげた方法です）を使用するためです。分離スコープの親の兄弟。

それを期待どおりに機能させるための適切な方法の例を追加します。（しかし、これはまだ一般的にかなりひどいデザインであり、これを行う正当な理由はありません）

caitp 2014年07月01日

実際、考えてみると、ng-repeatやその他の要素トランスクルージョンディレクティブでは、これを実際に修正することはできません。そうそう、バージョン1.2.0以降は機能しません

caitp 2014年07月01日

@petebacondarwinここに本当に初心者の質問があります。単に：の代わりにvar innerScope使用する理由：

myApp.directive( 'inject', function() {
    return {
        link: function( $scope, $element, $attrs, controller, $transclude ) {
            if ( !$transclude ) {
                throw minErr( 'ngTransclude' )( 'orphan',
                    'Illegal use of ngTransclude directive in the template! ' +
                    'No parent directive that requires a transclusion found. ' +
                    'Element: {0}',
                    startingTag( $element ));
            }

            $transclude( $scope, function( clone ) {
                $element.empty();
                $element.append( clone );
            });
        }
    };
});

Izhaki 2014年07月01日

元のディレクティブがスコープなども作成したい複雑なディレクティブと併置されているかどうかわからないため、新しい要素をコンパイルする場合は、通常、新しいスコープを作成するのが最適です。ただし、取得できる場合があります。ここでそれを離れて...

petebacondarwin 2014年07月01日

手伝ってくれてありがとう、
外部テンプレート（$ templateCache）を使用します。その後、少し単純になります。基本テンプレートはディレクティブスコープでコンパイルされます。

luboid 2014年07月01日

@ Izhaki @ petebacondarwinインクルードディレクティブをありがとうございます。ついに1.2.16から1.2.20に更新されましたが、アプリが非常に壊れ始めた理由を確認するのに少し時間がかかりました。

このスレッドを見つける前は、トランスクルージョンは非常に単純な概念だと思っていました。いいえ。

kencaron 2014年07月14日

これを解決するのを手伝ってくれたすべての人に感謝します。 1.2.21に更新すると、ここで説明する問題のためにインターフェイスの多くが壊れ、現在は正しい方向に進んでいます。

@caitp @petebacondarwin ：2つの追加情報を取得できれば非常に役立ちます。

「バージョン1.2.0について」（ケイトリンが言ったように）どこかで起こったどの重大な変更が、このアプローチを突然爆発させたのでしょうか？何が機能しなくなったかは理解していますが、そのリリースの近くの変更ログに、この特定の問題に関連していると思われる特定のものは見当たりません。
任意の内部コンテンツを継承できる分離された再利用可能なコンテナが必要な場合、エンドユーザーがng-transcludeの代わりに採用する必要がある代替アプローチは何ですか？例：大規模なマルチテナントアプリケーション。インターフェイスも可変で、完全にデータ駆動型です。そのため、リストコントロールのように、データを取得してデータを入力し、一貫した相互作用/動作を行う必要があるものがあります。それらを提供するラッパーディレクティブを標準化できるようにしたいと考えています。ただし、リストアイテムに使用するテンプレート（内部ディレクティブが含まれている場合があります）は、状況によって異なります。また、リストは、それらを生成するデータのツリー構造に基づいて、再帰的にネストされることがよくあります。したがって、これらのネストされたリストを分離する必要があります。すべてのコードを制御するため、内部を外部から分離するためにトランスクルージョンを使用していません。むしろ、ディレクティブガイドで明示的に推奨されているように、コンテナとその任意のコンテンツに対する優れた宣言型アプローチの直後です。 ng-includeは、インラインテンプレートから離れて、少し慣用的ではないと感じますが、これにはより良いオプションが含まれていますか（コンテナ宣言の属性として内部テンプレートへのパスを渡します）？

xml 2014年08月04日

何が機能しなくなったかは理解していますが、そのリリースの近くの変更ログに、この特定の問題に関連していると思われる特定のものは見当たりません。

https://github.com/angular/angular.js/blob/master/CHANGELOG.md#120 -timely-delivery-2013-11-08

私は特にこれらに言及していました

分離ディレクティブ（d0efd5ee）に属する子にのみ分離スコープを渡します
分離スコープを真に分離する（909cabd3、＃1924、＃2500）

でも、ヽ（ຈل͜ຈ）ﾉを知っている、もう何を話していたのか、本当に思い出せません。

caitp 2014年08月04日

変更ログには、変更と重大な変更の2種類のメッセージしかありません。これは重大な変更ではなく、バグ修正と見なされていました。多くの人がこの動作を使用したことを予測することは困難でした。しかし、それはおそらく移行ドキュメントに入るはずです（それはいくつかの愛が必要です）

Narretz 2014年08月04日

翔 ''ナフ。それらはそれらです。トランスクルージョンに関連する変更を探していましたが、これは明らかに、トランスクルージョンに付随する分離スコープの変更です。ありがとう！

xml 2014年08月04日

この変更により、コードも破損しました。これらのディレクティブのperson変数にアクセスし、それらを親スコープで使用するための簡単な宣言型の方法があるとbugが1.2.18で修正される前に何人の人がそれを使用していたかを見ると、これは一般的な使用例のようです。

これは1.2.17で動作し、1.2.18以降で壊れたデモです。

http://plnkr.co/edit/QswOxN?p=preview

evgenyneu 2014年08月18日

@evgenyneu ：内部コンテンツとコンテナディレクティブの両方を制御すると仮定すると、トランスクルージョンの代わりにng-includeを使用することは明確で簡単であり、必要な継承パターンが得られることがわかりました。テンプレート名を外部ディレクティブ宣言の属性として渡すだけで、以前にtranscludeディレクティブがあったのと同じ場所にng-includeディレクティブを配置します。問題が解決しました。

内部コンテンツテンプレートをビューテンプレート上でインラインにしたい場合は、ng-templateを使用して、以前使用していたのと同じ位置にテンプレートをラップします。

xml 2014年08月18日

@xmlilley 、すばらしいヒント、どうもありがとうございました。それは確かに最もクリーンなアプローチです。

デモは次のとおりです： http ：

evgenyneu 2014年08月18日

http://plnkr.co/edit/fw7thti1u4F9ArxsuYkQ?p=preview ---完璧ではありませんが、そこに到達します。

caitp 2014年08月18日

@caitp 、いいね、ありがとう。私たちはたくさんの解決策を持っています！

evgenyneu 2014年08月18日

この問題を見ている人のために、私は「改善された」ng-transcludeディレクティブを作成しました。その属性値は、求められる内部スコープを定義し、3のいずれかになります。

シルビング-トランスクルージョンされたコンテンツスコープは、トランスクルージョンが発生する要素の兄弟スコープです。これが現在のng-transcludeの動作です。
親-トランスクルージョンされたコンテンツスコープは、トランスクルージョンが発生する要素のスコープです。
子供は-トランスクルード内容の範囲は、トランスクルーが発生した要素のスコープの子スコープです。

使用例：

template: 
  '<div ng-transclude="parent">' +
  '</div>'

完全な例

すべての例については、このプランクを参照してください。

出力は次のようになります。

ソース

.config(function($provide){
    $provide.decorator('ngTranscludeDirective', ['$delegate', function($delegate) {
        // Remove the original directive
        $delegate.shift();
        return $delegate;
    }]);
})

.directive( 'ngTransclude', function() {
  return {
    restrict: 'EAC',
    link: function( $scope, $element, $attrs, controller, $transclude ) {
      if (!$transclude) {
        throw minErr('ngTransclude')('orphan',
         'Illegal use of ngTransclude directive in the template! ' +
         'No parent directive that requires a transclusion found. ' +
         'Element: {0}',
         startingTag($element));
      }

      var iScopeType = $attrs['ngTransclude'] || 'sibling';

      switch ( iScopeType ) {
        case 'sibling':
          $transclude( function( clone ) {
            $element.empty();
            $element.append( clone );
          });
          break;
        case 'parent':
          $transclude( $scope, function( clone ) {
            $element.empty();
            $element.append( clone );
          });
          break;
        case 'child':
          var iChildScope = $scope.$new();
          $transclude( iChildScope, function( clone ) {
            $element.empty();
            $element.append( clone );
            $element.on( '$destroy', function() {
              iChildScope.$destroy();
            });            
          });
          break;
      }
    }
  }
})

Izhaki 2014年08月26日

👍1

@ Izhaki -FWIW、+ 10。現在の規則に違反しませんが、一般的なユースケースに自発的にアクセスするためのクリーンで宣言的な方法を追加します。ありがとう！

xml 2014年08月27日

：+1： @Izhakiのソリューション用。これをそのまま使用しますが、angularに含めるとはるかに快適になります。

ziadsawalha 2014年09月11日

heycalmdown 2014年09月17日

@Izhaki +1、素晴らしい例です！

SebastianM 2014年09月17日

カスタムトランスクルージョンディレクティブをありがとう。デフォルトを上書きするのではなく、別のカスタムトランスクルージョンを作成することになりました。パッチには、どこから来たのかわからない関数呼び出しがいくつかあります。 minErr（）およびstartingTag（）

dehru 2014年09月19日

@ dehru-これらの関数はAngularJSの内部にあります。

petebacondarwin 2014年09月20日

@Izhakiどうもありがとう！興味があれば、トランスクルージョンされたコンテンツを繰り返すあなたのプランクをフォークしました。
ng-transclude = "parent"が期待どおりに機能しない可能性があることに注意してください。
http://plnkr.co/edit/S6ngqz?p=preview

plunker_ng-transclude_ng-repeat

thevictor13 2014年09月20日

@Izhakiとてもいい。
角度へのプルリクエストに含まれるべきもののように見えます。
少なくともGithubリポジトリを使用した別のディレクティブでは、公開できると思いますか（変更を提供できるように...）？
ありがとう

Urigo 2014年09月21日

https://github.com/Izhaki/ngTranscludeMod

Izhaki 2014年09月23日

イザキ、これはすごい。私はあなたを_心_します。

elbow-jason 2014年10月30日

@Izhakiこれは、子スコープの問題に対する非常に優れたソリューションです。ありがとう。

しかし、私は混乱していて、$ transclude関数の継承が外部ディレクティブからngTranscludeディレクティブにどのように伝わるのか説明できるかどうか疑問に思っていましたか？私が見つけることができる公式の場所はどこにも明示されていませんが、リンク関数で$ transclude関数を使用するには、ディレクティブでtransclude: trueを使用する必要があると思いました。コードを少し試してみたところ、 transclude: true実際にコードが壊れていることがわかりました。何が起きてる？

evanyeung 2014年11月14日

私はこれと何日も戦っただけでなく、トランスクルージョンがトランスクルージョンされた要素をそれらに置き換えるのではなく、トランスクルージョンプレースホルダー内に挿入するという事実もありました。

ng-transclude-replaceが両方の問題を処理することがわかりました！ http://gogoout.github.io/angular-directives-utils/#/api/ng -directives-utils.transcludeReplace

ng-repeatディレクティブをrepeatedディレクティブ自体またはそのようなものに伝播する必要はありません！すべての検証/バインディングを含め、すべてが機能しているように見えます。

これが私のコードのスニペットです：

<form-field label="Roles" required>
    <checkbox-group>
        <checkbox ng-repeat="role in roles" label="{{role.description}}">
            <input type="checkbox" name="selectedRoles" ng-model="role.selected" value="{{role.description}}" ng-required="!hasRole" />
        </checkbox>
    </checkbox-group>
</form-field>

abobwhite 2014年12月09日

@abobwhite ng-

aparij 2015年05月28日

私は最近この問題に遭遇しました。 @Izhakiは私のために働いていましたが、この議論からの間にベストプラクティスが出現したかどうか興味があります。特に、 ng-transclude="sibling | parent | child"を角度コアの一部にすることに関心はありましたか？

telekid 2016年04月26日

@ telekid-現在、この機能をコアに含める予定はありません。

petebacondarwin 2016年04月26日

解決策と回避策があると思いますが、ディレクティブの内部スコープにアクセスする方法があれば非常に便利です。

moneytree-doug 2016年05月03日

@Izhakiが作成したおきます。
ブランチ： https ：
PR： https ：
プランカー： http ：//plnkr.co/edit/5XGBEX0muH9CSijMfWsH？p = Preview

NickBolles 2016年05月03日

私がやったことは、 $parentを使用すること

だから私は次のようなものを持っています：

angular.module('test').directive('myDirectiveWithTransclusion', function() {
     return {
          restrict: 'E'
          transclude: {
               transcludeThis: 'transcludeThis'
          }
          template: "<div ng-repeat='item in array'><div ng-transclude='transcludeThis'></div></div>"
     }
})

<my-directive-with-transclusion>
     <transclude-this>
          {{$parent.item}}
     </transclude-this>
</my-directive-with-transclusion>

moneytree-doug 2016年05月04日

👍13 ❤8 🎉2

こんにちは@ moneytree-doug：私はあなたが提供したこのソリューションを使用しますが、トランスクルージョンのスコープを見つけました-これはまだディレクティブスコープであり、ng-repeatによって生成される新しいスコープの子ではありません。いくつか提案をいただけますか？

sy-tian 2017年01月05日

@szetin何が起こっているのか、何を期待しているのかを示すjsfiddleを作成していただけませんか。

moneytree-doug 2017年01月10日

このページは役に立ちましたか？

0 / 5 - 0 評価

Angular.js: 角度1.2.18：トランスクルージョンのng-repeat問題

最も参考になるコメント

全てのコメント48件

完全な例

ソース

関連する問題