161

ここに文書化されているように、スピンコントロールの「Angularized」バージョンを使用しています: 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 に表示されていても、入力をテストしてクリアできるように表示したいのです。

任意のポインタ/回答をいただければ幸いです。

ありがとう。

4

10 に答える 10

233

次のように機能します。

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

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

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

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

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

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

于 2013-09-20T16:12:05.007 に答える
49

まだ読んでいない場合は angular要素のドキュメントを読んで、jqLit​​e でサポートされているものとそうでないものを理解できるようにする必要があります。jqlite は、angular に組み込まれている jquery のサブセットです。

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

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

したがって、次のいずれかです。

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

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

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

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

の問題は、角度の問題ではないと思います。これは、ネイティブの html5 number 要素の意図され<input type="number">た動作です。

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

于 2013-06-21T08:27:01.393 に答える
28 
var target = document.getElementById('appBusyIndicator');

に等しい

var target = $document[0].getElementById('appBusyIndicator');
于 2015-12-28T18:28:33.053 に答える
17

$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');
于 2016-03-14T10:32:14.850 に答える
17

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

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

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

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

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

于 2014-09-20T16:46:30.130 に答える
4

カイザーの答えの改善：

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

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

于 2014-10-21T23:50:32.503 に答える
3

たぶん私はここで手遅れですが、これはうまくいきます：

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

于 2015-11-10T14:13:57.710 に答える