web-dev-qa-db-ja.com

angular.elementとdocument.getElementByIdまたはスピン（ビジー）コントロールを持つjQueryセレクター

私はここに文書化されているように、スピンコントロールの "Angularized"バージョンを使っています： http://blog.xvitcoder.com/adding-a-weel-progress-indicator-to-your-angularjs-application/ /

私が示された解決策について嫌いなことの1つは、DOM要素にスピンコントロールを効果的に結び付けるサービスでのjQueryの使用です。要素にアクセスするには、角度付きの構成要素を使用したいと思います。また、スピナーがサービス内でアタッチする必要がある要素のIDを「ハードコーディング」するのを避け、代わりにサービス内のIDを設定するディレクティブ（singleton）を使用して、サービスの他のユーザーまたはサービス自体がそれを知る必要はありません。

同じ要素IDに対して、angle.elementが何を与えるのか、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 "element"とDOM要素の使い方を明確にした文書の良い例を誰かに教えてもらえますか？ Angularは明らかにそれ自身のプロパティ、メソッドなどで要素を "ラップ"しますが、元の値を取得するのは難しいことがよくあります。たとえば、<input type='number'>フィールドがあり、ユーザーが " - "（引用符なし）を入力したときにuiに表示される元のコンテンツにアクセスしたい場合、おそらく "type = number"はAngularは、UIに表示されていても入力を拒否しています。それを確認してクリアできるようにしたいのです。

任意のポインター/回答は大歓迎です。

ありがとう。

jqueryangularjs
150
irascian

canは以下のように動作します。

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

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

angular.elementの公式文書：

jQueryが利用可能な場合、angular.elementはjQuery関数のエイリアスです。 jQueryが利用できない場合、angular.elementはAngularのjQueryの組み込みサブセット、 "jQuery lite"またはjqLit​​eに​​委任します。

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

なぜdocument.querySelector()を使うのか不思議に思う人は、 この答え を読んでください。

217
kaiser

まだ読んでいない場合は、angle element docsを読む必要があります。そのため、jqLit​​eでサポートされているもの、およびjjeryの一部であるjjLiteでないものはAngularに組み込まれています。

これらのセレクター はjqLit​​e単独では動作しません 、idによるセレクターはサポートされていないためです。

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

だから、どちらか：

  • jqueryよりも限定されていますが、ほとんどの状況では十分です。
  • あるいは、あなたはあなたのアプリケーションに完全なjQueryライブラリを含めて、あなたが本当にjqueryを必要とする場所で、通常のjqueryのようにそれを使用します。

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

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

編集2：私は前の質問の2番目の部分を逃しました：

<input type="number">、I thinkに関する問題はそれが厄介な問題ではない、それは native html 5 number要素の意図された動作です。

Jqueryの.val()または生の.value属性で検索しようとしても、数値以外の値は返されません。

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

等しい

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

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

Angularでは、このようにDOMを操作しないでください（jqueryの方法）が、次のようなAngular Helperを使用してください。

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

それを完全に制御するために、独自のディレクティブ（独自のDOMコンポーネント）を作成することもできます。

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

17
Thomas Decaux

誰かがgulpを使用している場合、document.getElementById()を使用するとエラーが表示され、$document.getElementById()を使用することが推奨されますが機能しません。

つかいます -

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

あなたは$ documentを使って要素にアクセスすることができます（$ documentは注入される必要があります）

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

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

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');
16
Nishant Baranwal

あなたはあなたのコントローラに$ documentを注入し、オリジナルのdocumentオブジェクトの代わりにそれを使うべきです。

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

Jqueryスタイル要素の折り返しが必要ない場合は、$ document [0] .querySelector（ '＃MyID'）によってDOMオブジェクトが返されます。

10
Adamy

これは私にとってうまくいった。

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

Kaiserの答えの改善

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

あなたのディレクティブに$documentをインジェクトすることを忘れないでください

3
Rob H

たぶん私はここでは遅すぎますがこれでうまくいくでしょう：

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オブジェクトが返されます。

3
Vishal Anand