問題タブ [angularjs-ng-transclude]

$http リクエスト実行時にスピナーを表示するディレクティブを作りたいです。

これは機能すると思いました（例：ユーザーのロード）：

メインコントローラー

ディレクティブを使用したテンプレート

request-loading-directive.js

request-loading-template.html

どんな助けでもいいです！どうも。

トランスクルージョン コンテンツにイベント ハンドラーを追加する適切な方法は何ですか? ディレクティブのコンシューマーが独自のクリック ハンドラーをドキュメントに追加することを望んでいません。ディレクティブはそれを処理する必要があります。しかし、ng-transclude で渡されたコンテンツにハンドラーを正しく追加する方法がわかりません。

いじってください: https://jsfiddle.net/hoe71p0e/12/ (Angular.js と JSFiddle を動作させることができません。リンク関数が呼び出されていません)

foo.html

foo.js

期待される結果(ボタンをクリックすると foo が呼び出されます)

実際の結果(ボタンをクリックしても何も起こりません)

data-ng-clickボタンの属性が欠落していることに注意してください。

また、私はこのようなものでいくつかの例を見てきました...

壊れた.js

.find()...しかし、検査官はクローンに「ボタン」が含まれていると考えているようですが、結果が返されないため、それらは失敗します。

この例 に基づいて、Angularで再利用可能な段階的なウィザード ディレクティブを実装しています。それはかなりうまくいっていますが、例のように、現在のステップ以外のすべてのステップを非表示にするために ng-show を使用しています。これにより、現在のステップと次のステップの両方が同時に表示されているステップを変更するたびに、ちらつきが発生します。私が理解できないのは、ちらつきをなくして、一度に 1 つのステップだけが表示されるようにする方法です。

私が試したこと: この問題を解決するための私自身の最初の試みは、show/hide-mechanic を ng-switch を使用するように変更することでしたが、ng-switch-when ディレクティブは文字列のみを受け入れるため、うまく機能しません (したがって、インデックスを自動的に入力しないでください)。さらに、 ng-switch-when はトランスクルージョンを介して機能します。つまり、1 つの要素に 2 つのトランスクルージョン ディレクティブがあり、意味がありません。

現在実装しているウィザード ディレクティブは次のようになります。

対応するウィザード テンプレートは次のようになります。

トランスクルージョンがどのように機能するかは既に知っています (最初のレベル内のみだと思います) が、ネストされたトランスクルージョン項目の範囲について質問があります。

わかりましたので、私はこのコードを持っています:

基本的に私は、controllerと<my-tabs>を持ってい<my-pane >ます。

myTabsディレクティブを見る：

ディレクティブのコンテンツが外側のディレクティブのスコープにアクセスできることを知っています

したがって、黄色の部分は外側のスコープ (メイン コントローラーのスコープ) にアクセスできます。

myPaneディレクティブのコードは次のとおりです。

プログラムは次のように始まります。

プログラムの出力は次のとおりです。

こんにちは , "i" の値 => 1000

しかし

ドキュメントによると、トランスクルードされたデータは、値を持つディレクティブmyPane'sであるディレクティブの外側のスコープにアクセスできる必要があります。myTabsi=2

ただし、スコープがmyPane分離されているため、 からスコープを継承しませんmyTabs。

質問

それで、取得するためにコントローラーのスコープの1レベル上に移動しますi=1000か?? _{（明確化、別の値を取得する方法を尋ねているのではありませんi-なぜ/どのように値が1000になっているのかを尋ねています）。}

つまり、スコープの階層はここでどのように見えるのでしょうか?

こんな感じですか？

ドキュメントは言う：

transclude オプションは、スコープがネストされる方法を変更します。トランスクルードされたディレクティブの内容が、内部にあるスコープではなく、ディレクティブの外側にあるスコープを持つようにします。そうすることで、内容がスコープ外にアクセスできるようになります。

myPAneしかし、outside ofディレクティブにはどのようなスコープがありますか?

言い換えれば、なぜ/どのようにi=1000？

フルプランカー

回答後に OP から編集

PeriScope (@MarkRajcok から) をインストールして構成した後、視覚的に確認できるようになりました。