問題タブ [angular-directive]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
5 に答える
49713 参照

javascript - AngularJSディレクティブとは何ですか?

私はAngularJSのドキュメントといくつかのチュートリアルを読むのにかなりの時間を費やしてきましたが、ドキュメントがいかに近づきにくいかに非常に驚いています。

AngularJSを手に入れようとしている他の人にも役立つかもしれない簡単で答えられる質問があります:

AngularJSディレクティブとは何ですか?

ディレクティブの単純で正確な定義はどこかにあるはずですが、AngularJS Webサイトでは、これらの驚くほど役に立たない定義を提供しています。

ホームページ

ディレクティブは、AngularJSで利用できるユニークで強力な機能です。ディレクティブを使用すると、アプリケーションに固有の新しいHTML構文を作成できます。

開発者向けドキュメント:

ディレクティブは、HTMLの新しいトリックを教える方法です。DOMコンパイル中に、ディレクティブはHTMLと照合され、実行されます。これにより、ディレクティブで動作を登録したり、DOMを変換したりできます。

そして、皮肉なことに、聴衆がすでに彼らが何であるかを理解していると仮定しているように見える指令についての一連の話があります。

明確な参照のために、誰もが説明するディレクティブが何であるかについての正確な定義を提供することができますか?

  1. それは何ですか(例としてjQueryの明確な定義を参照してください)
  2. どのような実際的な問題と状況に対処することを目的としていますか
  3. それが具体化するデザインパターン、あるいは、AngularJSのMVC/ MVWミッションと称されるものにどのように適合するか。
0 投票する
1 に答える
9686 参照

angularjs - 別のモジュールにあるディレクティブの使用方法

では、なぜこれが機能しないのでしょうか。そして言う 不明なプロバイダー: $compileProvider

しかし、ディレクティブをmyAppモジュールに移動すると機能します

0 投票する
5 に答える
7929 参照

javascript - Angularjs フォームの検証順序

通常のテキスト入力を含む単純な html フォームがあります。ng-minlength、angular組み込みフォーム入力ディレクティブng-maxlengthが入力に設定されています。ng-pattern

問題:およびng-patternによる長さチェックの前にチェックが適用されます。ng-minlengthng-maxlength

質問: デフォルトのチェック順序を変更するにはどうすればよいですか? つまり、最初に長さをチェックしてから、パターン チェックを適用しますか?

例:

現在の動作:

  • 「#」を入力してください - 「パターンエラー」を参照してください
  • 「###」を入力してください - 「パターンエラー」を参照してください

望ましい動作:

  • 「#」を入力してください - 「長さエラー」を参照してください
  • 「###」を入力してください - 「パターンエラー」を参照してください

参考までに、関連するjsfiddle

前もって感謝します。

0 投票する
1 に答える
121 参照

javascript - angularjs で複数のモデルを検索してフィルタリングする

ここでサンプルアプリを作成します。私のアプリには、スコープ内に と という名前のオブジェクトの 2 つの配列がありdataますdata2。また、私は2つのディレクティブを持っています:

モデルで名前で検索するための入力検索が1つあります。しかし、これら2つのモデルを1つの入力で同じクエリで検索するにはどうすればよいですか

0 投票する
1 に答える
1174 参照

javascript - ng-checkedのときにng-modelsがバインドされない

子チェックボックスがクリックされたときにチェックされる親チェックボックスがあります。この親チェックボックスを順番に 3 番目のチェックボックスにバインドします。ただし、変更が ng-checked によるものである場合、双方向バインディングは機能しません。テンプレートは次のとおりです。

jsfiddle の作業サンプルは次のとおりです: http://jsfiddle.net/Alien_time/vy5UM/1/

つまり、親チェックボックスをクリックしてチェックすると、ng-model は 3 番目のチェックボックスにバインドします。ただし、ng-checked が原因で親チェックボックスがチェックされると、3 番目のチェックボックスは変更を更新しません。Angularでこれを達成するにはどうすればよいですか?

0 投票する
2 に答える
3781 参照

angularjs - AngularJS と angular-translate: オブジェクト リテラルでの翻訳フィルターの使用

i18n に angular-translate を使用する angular JS アプリがあります。このアプリは、highcharts.js を使用してチャートも表示します。highcharts-ng の上にカスタム ディレクティブを作成しました。これにより、オブジェクト リテラルを式として渡すことができ、チャートの軸を構成するために使用されます。

私は次のようにディレクティブを使用します。

今、私は自分のアプリを翻訳したいと思っています。これは明らかに機能しないことに気付きました:

オブジェクトリテラル内で翻訳フィルターを使用する方法はありますか? そうでない場合、角度のあるアーキテクチャに固執しながら問題を解決するにはどうすればよいですか?

また、他の翻訳されていないフィールドを含むオブジェクト リテラルの受け渡しを中断するような方法でディレクティブのセマンティクスを変更することはできないことに注意してください。

最小限のサンプル フィドル: http://jsfiddle.net/Ssn53

0 投票する
1 に答える
13710 参照

javascript - Angular ディレクティブに複数の「require」オプションを追加する

通常、ディレクティブではrequire: 'ngModel'、スコープを渡したい場合に使用します。これはうまくいきます。しかし、私は現在、親から渡された異なる ngModels を持つ 5 つの異なる HTML 要素を作成するディレクティブを作成しています。属性として渡す必要がある ngmodels はngModel1, ngModel2, ngModel3, ngModel4, ngModel5. requireディレクティブ内の条件に複数のオプションを追加するにはどうすればよいですか?

私はこれらを試しましたが、うまくいきません:

複数の require オプションを追加するにはどうすればよいですか?

編集:

HTML コード:

指令:

0 投票する
1 に答える
86 参照

angularjs - AngularJS select ディレクティブに複数の null オプションを指定できますか?

ng-options を使用した Angular select ディレクティブがあります。また、null オプションが 1 つあります。

しかし、リストの最後に別の null オプションを付けたいので、結果のリストは次のようになります。

  • 会社を選択してください...
  • 会社1
  • 会社2
  • 会社3
  • 会社4
  • 新しい会社...

私は試してみました:

しかし、何も起こらないと推測できるように、2 番目の null オプションはどこにも表示されません。これを回避するAngularの方法はありますか? 1 つの代替手段は、ng-options を使用する代わりに ng-repeating option 要素であることを知っています。

0 投票する
2 に答える
180 参照

javascript - Angular - $q が意図したとおりに動作しない / $http が終了するのを待つのを助ける

私は最初の Angular プロジェクト (rails gem バージョン 1.2.16) に取り組んでいますが、$q を正しく使用する方法がわかりません。

クリックすると次のディレクティブがあります。 1. $http 要求を実行するためにファクトリ関数を呼び出すディレクティブ関数を呼び出します。 2. ページに追加されたテンプレートで、ディレクティブ関数 / $http からの応答を使用します。

指令:

工場:

HTML:

問題: ファクトリ関数が応答を返す前に、テンプレートが読み込まれます。

私の解決策: ディレクティブでファクトリを呼び出す関数を作成し、テンプレートを追加する前に $q を使用して応答を待機しようとしましたが、機能していないようです。

ヒントやリードは大歓迎です、ありがとう!

0 投票する
2 に答える
548 参照

javascript - 動的テンプレートを作成し、角度のあるコンテンツをバインドします

これらの素晴らしい記事のリンクに従って、送信する必要があるデータの性質によって特徴付けられる必要があるウィンドウのテンプレートを動的に作成する独自のディレクティブを作成しました。より明確にするために、アプリはテキスト入力を送信する必要があります。ディレクティブは、ブール値を送信する必要がある場合にチェックボックスではなく、入力領域を作成します。
ディレクティブを正常に取得した後、テンプレートのコンテンツをバインドして返送する際に問題が見つかりました。私はディレクティブ
のドキュメントを読みました。トランスクルードの値が役立つ可能性がありますが、私の試みでは成功しませんでした。以下のコードを記述します。

HTML

HTMLコントローラーページのJSファイル

DIRECTIVE の JSfile

非常に明確にするために、問題は addNote 関数のアラートが何も出力しないか未定義であり、inputArea のようなテンプレートの内容ではないことです。