問題タブ [transclusion]

ディレクティブを介して動的コントローラー (ディレクティブの観点から実行時に認識される) にテンプレートを渡そうとしています。

このようなもの：

jsFiddle を参照してください

コントローラーが見つかり、インスタンス化されますが、どういうわけか、トランスクルードされたテンプレートのコントローラーへのバインディングが機能しません。いくつかの注文要件を見逃していますか、またはこのコントローラーのスコープをトランスクルードされたテンプレートにバインドする方法はありますか?

Scenario

In my application, I have several occurrences of a list of items. I can insert new items by clicking a plus button above or below the item. I can delete an item by clicking the minus button on an item. I call this a "plus minus list" or "add remove list".

Existing Solution

Currently, I manage the adding and removing of items with a single delegate click handler per list, which is managed by the controller, in violation of good AngularJS style. I wish to place this logic in a custom directive. Furthermore, there is some scaffolding on each item (the plus and minus buttons, for example) that could be hidden inside a directive's template.

Specific Problem

When using a custom directive in combination with ng-repeat, transcludion, defined scope, and likely other things in the fairly convoluted system that is Angular custom directives, various things that intuitively should be accessible appear to be unavailable. Namely: the whole point of transclusion is to have access to the parent scope inside a directive.

If the directive template includes the ng-transclude tag inside of an ng-repeat, the transcluded content does not appear to retain its access to the outer scope (the application's scope, not the directive's scope). Yet, if this is done without the use of a directive (a bare ng-repeat) or if the directive has no ng-repeat, access works as expected.

Simplified Example

I have made a demo of the issue, showing all three cases:

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

Note that the green 'outer scope data' does not appear when a transcluding directive contains an ng-repeat. The data that is passed through explicitly (the fields) binds as expected, but the point of transclusion is that we do not have to explicitly pass all data that might be bound.

I'm using AngularJS 1.2.0-rc.3.

Previous Attempts

I have spent all day on this. I haven't seen anyone with exactly my scenario: there was usually some subtle reason why the transclusion wasn't required or they wished to access the parent scope inside the directive itself. I'm almost 100% certain that this is a subtle scope-related issue, and I don't know Angular well enough to resolve the subtly. Lacking better direction, I have already tried (at random) many combinations of the different forms of directive scope, transclude, and replace with predictably few results.

私の目標はeditable、属性が付加された任意の要素の HTML をユーザーが編集できるようにするディレクティブを作成することです (Plunkr: http://plnkr.co/edit/nIrr9Lu0PZN2PdnhQOC6を参照) 。

テキスト領域を初期化するためにトランスクルージョンされたコンテンツの元の生の HTML を取得できないことを除けば、これはほとんど機能します。からテキストを取得できますが、 、 などclone.text()の HTML タグがないため、編集せずに [適用] をクリックしても冪等ではありません。<H1><div>

メソッドclone.html()はエラーをスローし、Cannot read property 'childNodes' of undefined

(この質問は本質的に、以前に質問を組み立てようとした後、質問とコードを大規模に書き直したものであり、Angular ディレクティブで元のトランスクルージョンされたコンテンツを取得します)

これが残り火でも可能かどうか、私は興味があります。これは、angular で簡単に実行できます (plunkr: http://plnkr.co/edit/O2e0ukyXdKMs4FcgKGmX?p=preview ):

目標は、API コンシューマー向けの使いやすく、汎用的で、再利用可能なアコーディオン API を作成することです。

呼び出し元が使用できるようにしたいAPIはこれです(Angular APIと同様):

angularを使用して書いた実際の例を次に示します。

ここで私は残り火で同じことをしている：

index.html

main.js

EmberAccordionComponent.js

アプリケーション.hbs

ember-accordion-header.hbs

ember-accordion-body.hbs

index.hbs

ember-accordion.hbs

--

これはデバッグが難しいです。だから入れて：

そしてその：

に:

以下を出力します。

• Class.model = 未定義 (なぜ?)
• Ember.ArrayController

この記事 ( http://www.thesoftwaresimpleton.com/blog/2013/11/21/component-block/ )で提案されているように、Ember.Component の private _yield メソッドをオーバーライドしようとしました。

しかし、これを行うと、子コンポーネントのスコープで accordionPaneObject にまだアクセスできず、 {{log this.constructor}} が次を指すようになりました: .EmberAccordionHeaderComponent

どこかに到達しているように見えるので、もう 1 つレベルを上げる必要があります。

EmberAccordionHeaderComponent.js でこのコードを使用して試してみると、次のようになります。

まだ accordionPaneObject にアクセスしていませんが、{{log this.constructor}} が .EmberAccordionComponent を出力していることがわかります。したがって、私は正しいスコープにいるように見えますが、データはまだバインドされていません。

興味深いことに、オーバーライドされた _yield でコンテキストとコントローラーを再割り当てするこれらのバリエーションのいずれかを使用すると、次を使用してコンソールで求めているデータにアクセスできます。

ngRepeat を使用しているときに、配列から 4 つの項目をロードした順序付けられていないリストがあります。リスト項目のアンカー タグには、メッセージを起動する ngClick 属性の機能があります。関数呼び出しは、次のように使用するとうまく機能します。

リスト項目を含む順序付けられていないリストを挿入するための簡単なディレクティブを作成しました。リストは問題なくロードされますが、前述の同じ機能が起動しません。コードは次のとおりです。

これが私のjavascriptとangularjsコードです:

私がやろうとしたことを見たい場合に備えて、plnkrもあります： http://plnkr.co/edit/ycaAUMggKZEsWaYjeSO9?p=preview

助けてくれてありがとう。