トランスクルージョンはどこで新しいスコープを作成しますか？ http://plnkr.co/edit/EuHaBR26JgAegQKvwOGH?p=preview表示されません

私はng-transcludeディレクティブについて話している。 あなたの例にあるのは、まさに私の回避策です。

これは有効なリクエストです。 これは1.2で検討していましたが、最終リリースに近づいており、この重大な変更を導入したくありませんでした。

1.3で検討する必要があります

良いですね！ あなたがたがすでにそれを検討していることを嬉しく思います。

このために+1。 私の問題はこれに関連していると思います。フォームのディレクティブでng-transcludeを使用し、scope。$$ childHeadを経由してフォーム検証オブジェクトにアクセスする必要がありますが、モデルにアクセスするための問題はありません。

次に例を示します： http ：

+1は今日この問題に遭遇し、私はどこにでも$parent投げるのが嫌いです。

したがって、これに対する解決策を見つけるために、2つの可能性があるようです

1）ngTranscludeディレクティブを変更して、そのスコープを指定します（実際には、これよりもかなり縮小される可能性があります。コントローラーは必要ないと思います）。

または

2）スコープが指定されていない場合は、新しいスコープを作成しないでください

したがって、オプション1）を使用して数バイトを節約できます。これは、2）最小のソリューション（3行の削除など）であり、新しいスコープを作成することが暗黙的に意味をなすユースケースがあるかどうかはわかりません（あるかもしれませんが、それはトランスクルージョンがドキュメントで説明されている方法とは完全に反対のようです）

または、非常に凝ったものにしたい場合は、属性値を介してngTranscludeに新しいスコープが必要かどうかを指定できるようにすることで、変更を完全に壊さないようにすることができます。

考え？

あなたの1と2の違いはわかりません！

私の意見ですが、この変更には下位互換性が重要になると思います。 $ parentやscope。$$ childHeadなどを使用して、このスコープの問題を回避したアプリがたくさんあると思います（私のものも含まれます）。 この動作を変更する更新を行うと、いくつかの頭痛の種が発生します（ただし、頭痛の種は遅かれ早かれ発生する方がよい場合があります）。

とはいえ、理論的な観点からは、ng-trancludeがデフォルトでディレクティブと同じスコープを持つ方が理にかなっていると思います。 コンテンツをトランスクルージョンするポイントは、コンテンツのシームレスな部分が必要なことです。 トランスクルードを含むディレクティブのネストがたくさんある場合がありますが、それでもそれらを1つの大きなコンポーネントとして動作させたいと思います。 それらをすべて異なるスコープで使用すると、これは非常に注意が必要です。

すべて私の考え。 少なくとも、オプションを持つだけで、現在の状況を一歩上回ります。 :)

@trochを明確にするために、ngTranscludeDirectiveのコントローラーに以下を挿入します。

        // This is the function that is injected as `$transclude`.
        function controllersBoundTransclude(scope, cloneAttachFn) {
          var transcludeControllers;

          // no scope passed
          if (arguments.length < 2) {
            cloneAttachFn = scope;
            scope = undefined;
          }

          if (hasElementTranscludeDirective) {
            transcludeControllers = elementControllers;
          }

          return boundTranscludeFn(scope, cloneAttachFn, transcludeControllers);
        }

ディレクティブはスコープなしでこの関数を呼び出すため、スコープは未定義です...次に、 boundTranscludeFn 、transcludeScopeが偽の場合、新しいスコープを作成します。

つまり、私が言っているのは、1）の場合、トランスクルージョン関数の現在のスコープを指定するだけです（このディレクティブは、分離スコープを持つ可能性のあるものの隣接ディレクティブであるため、元のスコープが得られるはずです） 。

または、2）、新しいスコープを作成せず、現在のスコープ（createBoundTranscludeFn内）をデフォルトにします（変更を壊す可能性があり、多くのテストを壊す可能性があります）。

どちらも非常に簡単です。

+1

+1

+1

間違いなく+1

+1

+1

+1

+1してください

1.3に間に合うように完全に実行可能ではないかもしれませんが、 ES6プロキシはトランスクルージョンを本当に素晴らしいものにする可能性がありますが、階層内で正しい位置にあります。

プロキシの実装が利用できない場合は、おそらくscope。$ new（）にフォールバックするだけなので、実際にはかなり早い段階でこれを機能させることができるかもしれません。 トリッキーなことは、スペックが少し不安定なことです。

したがって、スコープ階層を非常にクリーンにしたい場合でも、不要なスコープが発生しますが、少なくとも、データバインディングが予期せず壊れないという副作用があります。 私は知らないよ。

+1

+1

+1

+1

+1

@caitp

または、非常に凝ったものにしたい場合は、属性値を介してngTranscludeに新しいスコープが必要かどうかを指定できるようにすることで、変更を完全に壊さないようにすることができます。

重大な変更がないものは何でも私の投票を得ます。

+1

+1

+1

+1

+1

関連： https ：

+1。 私はいつもこの振る舞いについて疑問に思いました。 私はcaitpのこのソリューションが好きです：

@caitp

または、非常に凝ったものにしたい場合は、属性値を介して> ngTranscludeで新しいスコープが必要かどうかを指定できるようにすることで、変更を完全に壊さないようにすることができます。

+1

+1

+1

この問題を見ている人のために、私は「改善された」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;
      }
    }
  }
})

＃8609で以前に提起した問題は、このスレッドの複製としてクローズされたため、ここで言い換えます。

私の意見では、DOMのトランスクルージョンされた部分に対してスコープが作成される現在の方法は、非常に非論理的です。
角度のある通常の流れに反するため、修正する必要があります。

これが私の前号の抜粋です：

ここで自分の問題を説明するために小さなプランクを作成しまし

主な犯罪者はこの指令に含まれています

     function pane() {
        return {
           restrict: 'E',
           transclude: true,
           scope: {
              title: '@'
           },
           template: '<div style="border: 1px solid black;">' +
              '<div style="background-color: gray">{{title}} (isolate scope id: {{$id}})</div>' +
              '<ng-transclude></ng-transclude>' +
              '</div>'
        };
     }

ユーザーが次のようなことをした場合：

<form>
    <pane title='enter your name'>
         <input type='text ngModel='username'>
    </pane>
    <pane title='enter your token'>
         <input type='text ngModel='token'>
   </pane>

その結果は、多くの人、特に新しいユーザーにとって驚くべきものです。 そして、これは（過度に）単純化されたユースケースですらあります。 そこにいくつかの検証メッセージを表示してみてください;）

これは、この問題が始まったときとは異なるユースケースですが、基本的に同じ問題であることに同意します。

代わりにdom要素でスコープをトランスクルージョンする方が理にかなっています。 新しいスコープが本当に必要な場合、ユーザーはとにかくngTransclude要素にngControllerを置くことができます。 または、 ngTranscludeオプションのフラグを設定してトリガーすることもできます。 このフラグは、＃5489のユースケースを解決するためにも使用できます。 また、提供されるソリューションcaitpにも使用できます。

+1

+1

+1

+1

+1

+1

+1

+1

+1

+1

+1

+1

+1は、トランスクルージョンされたディレクティブが、そうしないように求められた場合でもスコープを作成するようです。 例http://plnkr.co/edit/Wn81IBkE87vtigXvjmIa?p=preview

+1

+1

+1

+1

+1

+1

+1

+1

+ 1-これに対する有効な回避策はありますか？

@nikkwong 、このスレッドに投稿されたいくつかの回避策があります。 私は回避策を示したプランクでリンクし

OK、これが到着しても1.5.xまではありません

しかしその前に私は懸念を持っています。 新しいスコープ（分離スコープの兄弟、より正確には、トランスクルージョンされたコンテンツの元の元のスコープの子と呼びます）を作成する主な理由は、メモリリークを防ぐためです。

このプランカーを比較してください：
http://plnkr.co/edit/3NVxdYGy1AFDvD0M2BYI?p=preview

元のトランスクルージョンが発生したスコープを再利用するバージョンでは、次のようになります。
http://plnkr.co/edit/MXFz2awcqwQQ7R882Xwz?p=preview

2番目のバージョンでは、トランスクルージョンされたコンテンツのオンとオフを切り替えると、ウォッチャーの数が増え続けます-メモリリーク。

@petebacondarwinウォッチャーで破壊できるように、間違いなく新しいスコープにする必要があります。 トランスクルージョンについてのほとんどの不満は、ng-transcludeが包含スコープの兄弟スコープを作成し、プロトタイプの継承を通じてその変数にアクセスできなくなるためだと思います。 それとも私は間違っていますか？

問題は角度のある2ウェイバインディングの仕組みであり、間違いなくng-transcludeが子スコープを作成することを再確認しましたが、同じ状況で自分自身を見つける機会は数多くあります。たとえば、ng-repeatが子スコープを作成します。 角度コードを調べた後、双方向バインディングの問題の問題は、オブジェクト属性のプロパティでは機能しないが、オブジェクト自体では正常に機能することがわかりました。

問題： http ：

解決策： http ：

それは完璧ではありませんが、これが私たちの問題の多くを解決したことを知っているので、属性に双方向のバインドを決してしないでください

この解決策はすでにmbykovskyyによって提案されていることに注意してください。彼が問題を提起したとき、私はそれを理解するのに時間がかかったので、例を挙げています。

@petebacondarwin保持スコープが破壊されるまで、一時的なリークにすぎません。 これが（プランク）[http://plnkr.co/edit/Q587WQnX0u0u7JjhtCxa?p=preview]で、transclude-holding-scopeを切り替えると、すべてが正常にリリースされることを示しています。
それでも注意が必要な点です。 おそらく、このリークの可能性についてのドキュメントの大きな警告でそれを修正するのに十分かもしれませんか？

JSリークは、ブラウザを更新するまで一時的なものです;-)
2015年9月8日16:41、「SanderElias」 [email protected]は次のように書いています。

@petebacondarwinhttps ：//github.com/petebacondarwinこれは
保持スコープが破壊されるまでの一時的なリーク。 がここにあります
plunk）[http://plnkr.co/edit/Q587WQnX0u0u7JjhtCxa?p=preview]
トランスクルージョン保持スコープを切り替えると、すべてが取得されます
うまくリリースされました。
それでも注意が必要な点です。 おそらく、
この可能性のあるリークに関するドキュメントはそれを修正するのに十分かもしれませんか？

—
このメールに直接返信するか、GitHubで表示してください
https://github.com/angular/angular.js/issues/5489#issuecomment -138603298
。

@SanderElias Angularアプリケーションのユーザーは、一日の始まりから終わりまで忙しいです。
日中のメモリ使用量が増加していることはすでにわかっています。ページに何を配置するかについては細心の注意を払う必要があります。リークが発生する可能性が高くなるのは危険です。

@ troch-トランスクルージョンは、実際には、トランスクルージョンされたコンテンツが最初に見つかったスコープの子スコープを作成します。 これはいくつかのバージョンに戻って（間違いなく1.2で）壊れており、代わりに現在のディレクティブスコープの親の子を作成しただけです。 これは、深くネストされたトランスクルージョンが実際に間違ったトランスクルージョンスコープを取得したことを意味しました。

@petebacondarwinに同意する

何年も前にEmberに切り替えたのは良いことです。 :)