問題タブ [angular-directive]

私はこのようなフォームを装飾しています:

今、私はこのディレクティブをテストしようとしています:

しかし、テストは失敗します。

このディレクティブをテストする正しい Angular の方法は何ですか?

私は ui-router で AngularJS を使用しています。https://github.com/sayanee/angularjs-pdfで入手できる AngularJS PDF ディレクティブを利用しようとしています。すぐにPDFへのURLがないため、指定された例にいくつかの変更を加える必要があります。

しかし、私は問題に遭遇しました。PDF に関連付けられた id 値をルートに渡すため、ルートの変更が成功するまで、そのパラメーターの解決を待つ必要があります。これは、 https://github.com/angular-ui/ui-router/wikiの [解決] セクションのガイダンスに従って達成しました。

しかし、ページにアクセスすると、これらのいずれかが解決される前に、ファイルの URL を解決するためにこの ID を使用して API にクエリを実行する前に、ディレクティブをクリックしていることに気付きます。もちろん、ルートが解決の約束をまだ返していないため、ディレクティブのスコープに値を入力していません。したがって、これは null 値であり、最終的に pdf.js で URL が「ない」というエラーが発生します。 t が設定されています。

必要に応じてスコープが適切に設定されるまで、ディレクティブ内のロジックの実行を遅らせるにはどうすればよいですか?

したがって、上部にリンクしたディレクティブをダウンロードする必要はありません。私が取り組んでいるものは次のとおりです。

特に必要だとは思いませんが、コントローラーの簡略図を次に示します。

ui ビューは次のようになります。

ありがとう！

渡された属性を監視するディレクティブがありますが、その属性には生の文字列値または式を渡すことができます。式が渡された場合は、それを監視する必要があります。しかし、生の文字列が渡された場合、属性を監視する必要はありません。式が文字列に対して渡されるかどうかに基づいて、オプションで属性を監視する標準的な方法があるかどうか疑問に思っていますか? attrs で「{{*}}」を確認できますが、それが完了しているかどうかはわかりません。

ディレクティブは単にこれを行います:

my-drct は次のように使用できます。

ビューアーの外観が本当に好きなので、 pdf.jsプロジェクトのviewer.js機能をカプセル化する Angular ディレクティブを作成しようとしていますが、自分の Angular バインディングから変数を渡すことができるようにしたいと考えています。

現在、Sayanee のプロジェクト ( https://github.com/sayanee/angularjs-pdf ) のような 2 つの angular-pdf のようなプロジェクトがあり、 https://github.com/mozillaで基本的な機能をほとんど提供しているように見えます。 /pdf.js/blob/master/examples/text-selection/js/minimal.jsおよび Anrennmair のプロジェクト ( https://github.com/akrennmair/ng-pdfviewer)

これらの pdf ビューアーは本当に見栄えがよくありません。私は、pdf.js ビューアーがページ ビューの後にページを表示し、簡単にスクロールできるようにする方法が気に入っています。印刷、ブックマーク、添付ファイル、保存、開くなどのすべての機能は必要ないので、少なくともいくらかの作業を節約できるはずですが、私の質問は次のとおりです。

このビューアをディレクティブとして記述するにはどうすればよいですか? より具体的には、以前の質問への回答で、回答者は、最初の GitHub プロジェクトは角度的な観点から設計が不十分であると述べました。これを行う適切な方法は何ですか？いくつかのベスト プラクティスに従って、最初から適切に記述したいと思いますが、この範囲でそれらのプラクティスがどのようなものになるかについて明確なものを見つけることができませんでした。

バックグラウンド：

コードベースへのアクセスが制限されているカスタム CMS を使用しています。そのため、いくつかのケースでは、JavaScript を使用していくつかの DOM 操作を行う予定です。

問題：

コンテナ ディレクティブがあり、コンテナにはプレーンな古い HTML アイテムがありますが、そのアイテムをサーバー側からのディレクティブとしてマークすることができません。また、プレーンな古い HTML アイテムには、ディレクティブであるサブコンテンツが含まれています。

例：

これが前です：

その後、DOM は次のようになります。

質問：

JavaScript を使用して、ディレクティブのネストの間にディレクティブである DOM 要素を挿入するための最良のアプローチについて、誰か提案がありますか?

いくつかの考え：

angularでコンパイルの前にDOMを操作すると思いますが、Angularのフレームワーク内でこれを行う方法があるのだろうか。

もう 1 つのオプションは、コンテナー ディレクティブのリンク後機能です。「container-item」というディレクティブ要素で HTML アイテムをラップし、アイテムを手動で $compile することができます。それで、私はこれを試しましたが、トランスクルードされたコンテンツを含むディレクティブが既に含まれているアイテムに関連するエラーが発生します。「ngTransclude」についての何かが予想外です。これは、すでに処理された内部ディレクティブに関連していると思います。

my-minlength属性が文字列 (null ではない) であるかどうか、およびそうであるかどうかをチェックする非常に単純なディレクティブを作成しようとしています。ng-minlength属性を入力要素に追加します。これは機能するはずですが、機能していません。

私の指令

私のHTML

可能性のあるエラーから完全に取り除かれた提案を編集します - それでも機能しません。

従業員数と総給与額の 2 つのフォーム フィールドがあります。

ユーザーはどちらにもゼロ以外の値を入力する必要はありません。ただし、一方にゼロ以外の値を入力した場合は、もう一方にも入力する必要があり、それを検証したいと思います。

これらのフィールドはセットで繰り返されます。つまり、給与計算ごとにペアになるため、ID またはクラスでそれらを取得できるかどうかはわかりません。

以前にいくつかのカスタム検証ディレクティブを作成しましたが、別の関連フィールドの値をチェックするものはありませんでした。

app.js でコントローラーとディレクティブを定義し、index.html で使用します。

app.js

index.html

ディレクティブで alert(display) を指定すると、「world」と出力されます。

以下は私のタブ付きウィンドウです。ディレクティブのテンプレート内で以下のメニューの JavaScript を提供する場所を教えてください。

以下は私の指示です

以下は、コントローラーを呼び出すディレクティブのスニペットです

上記のコードを使用すると、要素が変更されるたびに changeclient() 関数が呼び出されます。しかし、私の要件は、選択ボックスの値のみを変更するときに changeClient 関数を呼び出す必要があることです。これを行う方法を教えてください。

編集：

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

テキストボックスまたはドロップダウンの値を変更し、アラートボックスが表示されている場所をクリックすると、プランカーコードが見つかります。しかし、私の要件は、ドロップダウン値を変更してどこかをクリックした場合にのみアラートを表示することです(テキストボックスではありません)。