問題タブ [angularjs-directive]

AngularJS に基本的なアプリケーションがあります。モデルには、多数のアイテムとそれらのアイテムに関連付けられたタグが含まれています。私が達成しようとしているのは、表示されるアイテムをフィルタリングして、1 つ以上のアクティブなタグを持つアイテムのみが表示されるようにすることですが、ビューからモデルを操作する方法を理解するのに苦労しています。

JS はhttp://jsfiddle.net/Qxbka/2で入手できます。これには、これまでに到達した状態が含まれていますが、2 つの問題があります。toggleTag()まず、ディレクティブはコントローラーでメソッドを呼び出そうとします。

しかし、メソッドは呼び出されません。ng-repeat次に、出力セクションを変更して、1 つ以上のアクティブなタグを持つ項目のみを表示する方法がわかりません。

私が間違っていることと、これを機能させる方法についての指針をいただければ幸いです。

更新 ディレクティブのメソッドを更新して、データ項目を直接渡すようにしました。

toggle()また、ディレクティブにメソッドを作成しました。これを行うことで操作が可能dataになり、状態 HTML に反映されますが、これが正しい方法であるかどうかについてのフィードバックをいただければ幸いです (私にはまったく正しくないと感じています)。

タグの値が更新されたときに出力を再評価する方法にまだこだわっています。

angularjsの達人がこれで私を助けてくれることを願っています。ここに私のangularjsコードがあります

データが汚れている場合はブラウザの戻るボタンのクリックで警告しますが、[キャンセル] または [OK] をクリックすると、ルートの変更が完了しevent.preventDefault()ます。動作していないようです。何が間違っているのか誰でも指摘できますか

ngModel を必要とし、ngModel のパーサーとフォーマッター関数を追加する、入力要素に適用される構成可能なディレクティブを作成しようとしています。

私が抱えている問題は、ngModel バインディングを同時にサポートしながら、補間された値をディレクティブに渡すことができないように見えることです。たとえば、次の 2 つの方法のいずれかでディレクティブを使用できるようにしたいと考えています。

リテラル引数を渡す:

または現在のスコープから補間された引数を渡します。

ディレクティブ定義でリンク関数の属性引数を読み取ると、1 回目の使用では attributes.myDirective の値を取得できますが、2 回目の使用では myDirective の値は未定義です。

ここで、分離スコープをディレクティブ定義に追加すると、次のようになります。

次に、上記のシナリオで scope.myDirective が定義および補間されますが、ngModel が壊れています。私のパーサー/フォーマッター関数は、入力引数に対して未定義で渡されます。何が起こっているのか、どうすれば私が望む動作を実装できますか?

指令：

リンク関数で要素の背景色を利用するカスタム ディレクティブがあります。

HTML スニペット:

これを最初にコーディングしたとき、タグに静的なクラス名を使用していました (CSS で background-color を設定する方法です)。これらのディレクティブに動的なクラス名を付ける必要がありますが、クラス名がまだ適用されていないため、突然要素から背景色を取得できなくなります。

AngularJSで慣用的にこれを達成するにはどうすればよいですか?

ディレクティブ コントローラーに関数があり、テストしようとしていますが、リソースが見つかりませんでした。私はそれぞれの前に持っています

これにより、エラー TypeError: Object # has no method 'datePickerChange' がスローされます

ユーザーがブラウザの戻るボタンをクリックしようとして、フォーム上のデータがダーティである場合、確認が表示されます。

これがAngularjsコントローラーのコードです

しかし、リダイレクトを防ぐ方法

AngularJSを使用してアンケートフォームを作成しており、HTMLを軽量に保つために必要なさまざまな種類の質問をテンプレート化しています。

HTML：

JS：

入力タグng-model="{{valvar}}"内で使用すると、コンパイルエラーが発生します。

代わりにng-click="{{valvar}} = 0"を使用しようとすると、コンパイルエラーは発生しませんが、ラジオボタンをクリックしてもtestVarの値を取得するための表示ステートメントが機能しません。

ボタンをクリックしたときにHTMLの最後の行がtestVarの値で適切に更新されるように、これをどのように修正しますか？

Bootstrapと一緒にAngularJSを使用しています。私は両方のフレームワークにかなり慣れていないので、これがこれを行うための最良の方法であるかどうかはわかりません。

私はこの指令を持っています

scope.treeDataを更新するたびに、ディレクティブが更新されません。誰かが私のコントローラーから私のディレクティブを更新する方法について何か考えがありますか？

ありがとうございました

新しいディレクティブを作成するときに使用するスコープのタイプを決定するのに役立つガイドラインを探しています。理想的には、一連の質問を案内し、正しい答えをポップアウトするフローチャートに似たものが欲しいです。新しいスコープ、新しい子スコープ、または新しい分離スコープはありませんが、それは多すぎることを求めている可能性があります。これが私の現在のガイドラインのセットです：

• ディレクティブを使用する要素がng-modelを使用する場合は、分離スコープを使用しないでください。「分離スコープで ng-modelを使用できますか？
  」を参照してください。フォーマッタが分離スコープで機能しないのはなぜですか？
  
• ディレクティブがスコープ/モデルのプロパティを変更しない場合は、新しいスコープを作成しないでください
• ディレクティブがDOM要素のセットをカプセル化していて（ドキュメントには「複雑なDOM構造」と記載されています）、ディレクティブが要素として使用される場合、または同じ要素に他のディレクティブがない場合は、スコープの分離が適切に機能するようです。

要素に分離スコープを持つディレクティブを使用すると、同じ要素上の他のすべてのディレクティブが同じ（1つの）分離スコープを使用するように強制されることを知っています。したがって、分離スコープを使用できる場合、これは厳しく制限されませんか？

Angular-UIチームの一部（または多くのディレクティブを作成した他のチーム）が彼らの経験を共有できることを願っています。

「再利用可能なコンポーネントには分離されたスコープを使用する」という単純な回答を追加しないでください。

require - 現在のディレクティブ リンク関数に別のコントローラーを渡す必要があります。require は、渡すディレクティブ コントローラーの名前を取ります。そのようなコントローラーが見つからない場合、エラーが発生します。名前には次のプレフィックスを付けることができます。

• ? - エラーを発生させないでください。これにより、require 依存関係がオプションになります。
• ^ - 親要素でもコントローラーを探します。

上記は公式ドキュメントの定義です。ここでのあいまいさは、正確には「ディレクティブ コントローラー」とは何かということです。

例として、angularjs-ui ブートストラップ プロジェクトのtabs ディレクティブを取り上げます。

paneディレクティブには がありrequire: '^tabs'、tabsはその親要素のディレクティブの名前ですが、そのディレクティブにアタッチされているコントローラーの名前はですTabsController。require: '^TabsController'上記の定義の私自身の解釈からすると、そうではないはずであり、それはrequire: '^tabs'明らかに間違っています。私の理解に欠けているものを教えてください。