☰

angular.elementとdocument.getElementByIdまたはスピン（ビジー）コントロール付きのjQueryセレクター 質問する

tag-icon • tag-icon jquery angularjs
angular.elementとdocument.getElementByIdまたはスピン（ビジー）コントロール付きのjQueryセレクター 質問する

ここで説明されているように、私はスピン コントロールの「角度付き」バージョンを使用しています。http://blog.xvitcoder.com/adding-a-weel-progress-indicator-to-your-angularjs-application/

示されたソリューションで気に入らない点の 1 つは、スピン コントロールを DOM 要素に効果的にアタッチするサービスでの jQuery の使用です。要素にアクセスするには、Angular 構造を使用することをお勧めします。また、サービス内でスピナーをアタッチする必要がある要素の ID を「ハードコーディング」することは避け、代わりに、サービスの他のユーザーやサービス自体がそれを知る必要がないように、サービス (シングルトン) で ID を設定するディレクティブを使用します。

angular.element が返す結果と、同じ要素 ID の document.getElementById が返す結果の区別に苦労しています。たとえば、次のように動作します。

  var target = document.getElementById('appBusyIndicator');

これらはどれも実行しません:

  var target = angular.element('#appBusyIndicator');
  var target = angular.element('appBusyIndicator');

明らかに間違っているはずのことをやっているようです! 誰か助けてくれませんか?

上記の動作を実現できたと仮定すると、要素へのjQueryアクセスを置き換えようとすると、同様の問題が発生します。たとえば、$(target).fadeIn('fast');動作するangular.element('#appBusyIndicator').fadeIn('fast')かangular.element('appBusyIndicator').fadeIn('fast')動作しないかなどです。

Angular の「要素」と DOM 要素の使用を明確に説明しているドキュメントの良い例を教えていただけますか? Angular は明らかに、独自のプロパティ、メソッドなどで要素を「ラップ」しますが、元の値を取得するのが難しいことがよくあります。たとえば、フィールドがあり<input type='number'>、ユーザーが「--」(引用符なし) と入力したときに UI に表示される元のコンテンツにアクセスしたい場合、何も取得されません。おそらく、「type=number」は、UI に表示されているにもかかわらず Angular が入力を拒否していることを意味し、テストしてクリアできるように確認したいためです。

何かアドバイスや回答があれば、ぜひお願いします。

ありがとう。

ベストアンサー1

それできる次のように動作します:

var myElement = angular.element( document.querySelector( '#some-id' ) );

あなたは包むDocument.querySelector()ネイティブJavascript呼び出しにangular.element()要素を呼び出します。そのため、常にjqLit​​eまたはjQueryjQueryオブジェクトは、使用可能/ロードされているかどうかによって異なります。

公式ドキュメントangular.element:

もしjQuery利用可能な場合は、関数のangular.elementエイリアスですjQuery。jQueryが利用できない場合は、angular.element角度の組み込みサブセットであるjQuery「jQuery lite」またはjqLit​​e。

のすべての要素参照はAngular常にjQueryまたはjqLite(ディレクティブのコンパイルまたはリンク関数の要素引数など)。これらは生のDOM参照ではありません。

なぜ を使うのか疑問に思う場合はdocument.querySelector()、以下をお読みください。この答え。

おすすめ記事