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

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

表示されたソリューションについて私が気に入らない点の1つは、スピンコントロールをDOM要素に効果的にアタッチするサービスでのjQueryの使用です。要素にアクセスするには、角度のある構造を使用したいと思います。また、スピナーがサービス内にアタッチする必要のある要素の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」がAngularが拒否していることを意味するためUIに表示されていても入力を確認したいので、テストしてクリアします。

どんなポインタ/答えもありがたいです。

ありがとう。

それはそのように働くことができます：

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

Document.querySelector()ネイティブJavascript呼び出しを呼び出しにラップしangular.element()ます。したがって、利用可能/ロードされているかどうかに応じて、常にjqLit​​eまたはjQueryオブジェクトの要素を取得しますjQuery。

の公式ドキュメントangular.element：

jQueryが使用可能な場合、angular.elementはjQuery関数のエイリアスです。jQueryのを使用できない場合は、angular.elementに委譲角度 Sは、内蔵のサブセットjQuery、「jQueryのライト」またはと呼ばれることjqLit​​e。

内のすべての要素参照はAngular、常にjQueryまたはjqLite（ディレクティブコンパイルまたはリンク関数の要素引数など）でラップされます。それらは決して生のDOM参照ではありません。

なぜ使用するのか疑問に思われる場合はdocument.querySelector()、この回答をお読みください。

まだ読んでいない場合は、角度要素のドキュメントを読んでください。jqLit​​eでサポートされているものと、-jqliteでサポートされていないものは、angularに組み込まれているjqueryのサブセットです。

IDによるセレクターはサポートされていないため、これらのセレクターは jqLit​​eだけでは機能しません。

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

だから、どちらか：

• jqueryよりも制限されたjqLit​​eを単独で使用しますが、ほとんどの状況で十分です。
• または、アプリに完全なjQuery libを含めて、jqueryが本当に必要な場所で、通常のjqueryのように使用します。

編集：jQueryは、jqLit​​eよりも優先するために、angularJSの前にロードする必要があることに注意してください。

DOMContentLoadedイベントが発生する前に読み込まれた場合、実際のjQueryは常にjqLit​​eよりも優先されます。

Edit2：前に質問の2番目の部分を逃しました：

問題は<input type="number">、私は考えてそれはの意図した動作であり、それは角度の問題ではありませんネイティブ HTML5の数要素。

jquery .val()またはraw .value属性で値を取得しようとしても、数値以外の値は返されません。

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

等しい

var target = $document[0].getElementById('appBusyIndicator');

Angularを使用するのは正しい方法ではないと思います。フレームワークメソッドが存在しない場合は、作成しないでください。これは、フレームワーク（ここでは角張った）がこのように機能しないことを意味します。

angularでは、このようにDOMを操作するべきではありません（jqueryの方法）。ただし、次のような角度ヘルパーを使用してください。

<div ng-show="isLoading" class="loader"></div>

または、独自のディレクティブ（独自のDOMコンポーネント）を作成して、それを完全に制御します。

ところで、あなたはここで見ることができますhttp://caniuse.com/#search=queryselector querySelectorはよくサポートされているので安全に使用できます。

gulpを使用document.getElementById()している場合、使用するとエラーが表示され、使用するように提案されます$document.getElementById()が、機能しません。

使用する -

$document[0].getElementById('id')

$ documentを使用して要素にアクセスできます（$ documentを挿入する必要があります）

var target = $document('#appBusyIndicator');
var target = $document('appBusyIndicator');

または角度要素を使用すると、指定した要素には次のようにアクセスできます。

var targets = angular.element(document).find('div'); //array of all div
var targets = angular.element(document).find('p');
var target = angular.element(document).find('#appBusyIndicator');

$ documentをコントローラーに挿入し、元のドキュメントオブジェクトの代わりに使用する必要があります。

var myElement = angular.element($document[0].querySelector('#MyID'))

jqueryスタイル要素のラップが必要ない場合、$ document [0] .querySelector（ '＃MyID'）はDOMオブジェクトを提供します。

これでうまくいきました。

angular.forEach(element.find('div'), function(node)
{
  if(node.id == 'someid'){
    //do something
  }
  if(node.className == 'someclass'){
    //do something
  }
});

カイザーの答えの改善：

var myEl = $document.find('#some-id');

$documentディレクティブに注入することを忘れないでください

多分私はここでは遅すぎるかもしれませんが、これはうまくいきます：

var target = angular.element(appBusyIndicator);

ありませんappBusyIndicator。これはプレーンID値です。

舞台裏で何が起こっているのか：（divに適用されていると仮定して）（angular.js行番号から取得：2769以降...）

/////////////////////////////////////////////
function JQLite(element) {     //element = div#appBusyIndicator
  if (element instanceof JQLite) {
    return element;
  }

  var argIsString;

  if (isString(element)) {
    element = trim(element);
    argIsString = true;
  }
  if (!(this instanceof JQLite)) {
    if (argIsString && element.charAt(0) != '<') {
      throw jqLiteMinErr('nosel', 'Looking up elements via selectors is not supported by jqLite! See: http://docs.angularjs.org/api/angular.element');
    }
    return new JQLite(element);
  }

デフォルトでは、ページにjQueryがない場合、jqLit​​eが使用されます。引数は内部的にIDとして認識され、対応するjQueryオブジェクトが返されます。