問題タブ [isolate-scope]

私はAngularにかなり慣れていないので、これらのオブジェクトがどのように機能するかを学ぶために独自のディレクティブを作成しようとしています. 私の問題は、同じコントローラーで何度も使用できるように、ディレクティブのスコープをどのように分離するかに関するものです。

状況をよりよく説明するために、ここにプランカーを作成しました: http://plnkr.co/edit/NsISESR9sIs5Nf577DX4?p=preview

html:

js:

基本的には 1 つのボタンで機能しますが、2 つのボタンでは機能しません。スコープを分離する必要があることはわかっていますが、方法がわかりません... 例を見てきましたが、extra-attributes を使用して変数を渡します。内部メソッドを呼び出す必要があります。

誰かがそれを行う方法を理解するのを手伝ってもらえますか? ありがとうございました！

ネストされたディレクティブに問題があり、親からスコープを継承しています。継承元のスコープが分離スコープである場合があります。私は以下のコードを持っています

test.html

app.js

special-inputs.js

ご覧のとおり、ネストされたディレクティブは独自の分離スコープを作成しようとしていますが、親の分離スコープから「selectedItem」を取得しています。

ドキュメントには、継承する必要があり、トランスクルージョンは半プロトタイプであると書かれているため、なぜ機能しないのか疑問に思っています。ありがとう。どんな助けでもいただければ幸いです

更新 コードを更新して、現在発生している問題を示しました。親の pre + post リンク関数にスコープ項目が設定されているようですが、子には決して置かれません。コンソール出力

私は使用して値を設定しようとしscope.$watchましattrs.$observeた

以下の date-picker-search ディレクティブのスコープを分離するのに問題があります。

私の最初の試みでは、このコードを使用してみましたが、予想どおり ng-model="date" で 1 つの入力を変更すると、同じ ng-model でディレクティブを参照するすべての入力が更新されます。

すべてのモデルは、クリックまたは入力することで更新されます

ディレクティブでスコープを分離することで問題が解決すると考えました。カレンダーをクリックして日付を入力するだけの場合はある程度そうですが、手動で日付を入力しようとすると、ディレクティブを参照するすべての入力が更新されます。

クリックだけでモデル更新

この問題を解決できた唯一の方法は、各要素の ng-models を変更して、ランダムな親参照 (a.data、b.data、c.data、d.data) を与えることです。これにより、各日付ピッカーを個別に変更できますが、明らかに非常に悪い解決策です。ここで問題が何であるかを誰かが知っている場合は、助けていただければ幸いです。スコープを分離することと関係がありますよね？

カスタム コンポーネント ディレクティブに AngularJS が提供する組み込みのフォーム検証を使用したいと考えています。しかし、うまくいきません。検証が失敗した場合、modelValue と viewValue は '' 空の文字列に設定されます。タイピングが全部なくなった…

script.js

DOM HTML 内

DOM 要素で ng-model を使用できますか? カスタムのisolateディレクティブもなしでng-modelディレクティブを使用したいからです。

目標は、各フォーム コンポーネント ディレクティブに独自の独立したスコープを持たせ、独自のスコープに依存しない親スコープを検証することです。<input ng-model="model">要素の ng-model ディレクティブを変更すると、正常に<input model="model">動作します。私の質問は、ng-model属性を使用して、分離された子スコープのng-modelを同じ名前で双方向にバインドできますか? コンポーネントのディレクティブを動的に変更したいかもしれないからです。

これがPlunkerで作成した問題です

「Celebrity Name」の Angular.js ディレクティブを使用して簡単な例を作成しました。分離スコープ @,&,= について読んでいますが、次の簡単な例でこれらを使用してその使用法と違いを理解する方法がわかりません。誰かが私を助けることができますか？

HTML:

結果：

この簡単な例で 3 種類の分離スコープを使用する方法を誰か教えてください。

私は Typescript と Angular を使用しており、(とりわけ) 以下のアクセス可能なアイコン ディレクティブ from hereを使用して、サイトをよりアクセスしやすくしようとしています。

Typescript コンパイラは、isolate スコープを好まないため、次のエラーが表示されます。

name: '@'この構造体に型を指定する方法がわかりません。text:'@'また、TS がスコープ オブジェクト内にセミコロンを必要とする理由、またはモジュールの後に宣言を必要とする理由がわかりません。

私は ng.IDirective インターフェイスを実装しているので、isolate スコープを処理できると期待しています。

何か案は？ありがとう！

参考までに、angular.d.ts の IDirective インターフェイスを次に示します。