spin (meşgul) kontrollü açısal.element vs document.getElementById veya jQuery seçici

Burada gösterildiği gibi Spin denetiminin "Açısallaştırılmış" sürümünü kullanıyorum: http://blog.xvitcoder.com/adding-a-weel-progress-indicator-to-your-angularjs-application/

Gösterilen çözüm hakkında sevmediğim şeylerden biri, jQuery'nin etkin bir şekilde döndürme denetimini DOM öğesine bağlayan hizmette kullanılmasıdır. Elemana erişmek için açısal yapılar kullanmayı tercih ederim. Ayrıca, döndürücünün hizmet içinde eklemesi gereken öğenin kimliğini "sabit kodlamadan" kaçınmak ve bunun yerine hizmetin diğer kullanıcılarını (singleton) kimliğini ayarlayan bir yönerge kullanmak veya hizmetin kendisi bunu bilmek gerekmez.

Ne açısal.element bize aynı element id bize ne document.getElementById verir ile mücadele ediyorum. Örneğin. Bu çalışıyor:

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

Bunların hiçbiri şunları yapmaz:

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

Açıkça yanlış olması gereken bir şey yapıyorum! Biri yardım edebilir mi?

Yukarıdaki çalışmayı alabilir varsayarak, öğeye jQuery erişimini değiştirmeye çalışırken benzer bir sorun var: örneğin $(target).fadeIn('fast'); çalışır angular.element('#appBusyIndicator').fadeIn('fast')ya angular.element('appBusyIndicator').fadeIn('fast')da değil

Birisi beni DOM öğesiyle bir Açısal "öğenin" kullanımını açıklayan belgelerin iyi bir örneğine işaret edebilir mi? Açısal, öğeyi kendi özellikleri, yöntemleri vb. İle "sarar" ancak orijinal değeri elde etmek genellikle zordur. Örneğin, bir <input type='number'>alanım varsa ve kullanıcı "-" (tırnak işaretleri olmadan) yazdığında kullanıcı arayüzünde görünen orijinal içeriğe erişmek istiyorsanız, muhtemelen "type = number", Angular reddediyor demektir giriş kullanıcı arayüzünde görünür olmasına rağmen ve bunu görmek istiyorum, böylece test edebilir ve temizleyebilirim.

Herhangi bir işaretçi / cevap takdir.

Teşekkürler.

Bu şekilde çalışabilir:

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

Sen sarmak Document.querySelector()yerli JavaScript içine çağrıyı angular.element()çağrı. Böylece , kullanılabilir / yüklü olup olmamasına bağlı olarak öğeyi her zaman bir jqLite veya jQuery nesnesinde alırsınızjQuery .

Resmi belgeler angular.element:

Eğer jQuery kullanılabilir, angular.elementbir başka adıdır jQueryişlevi. JQuery kullanılamıyorsa, "jQuery lite" veya jqLite adı verilen Angular ın yerleşik alt kümesine angular.elementdelege eder .jQuery

İçindeki tüm öğe referansları Angularher zaman jQuery veya jqLite(direktifler derleme veya link fonksiyonundaki element argümanı gibi) ile sarılır . Asla ham DOMreferans değildirler.

Neden kullanacağınızı merak ediyorsanız document.querySelector(), lütfen bu cevabı okuyun .

Henüz açmadıysanız açısal öğe belgelerini okumalısınız , böylece jqLite tarafından neyin desteklendiğini ve niçin -jqlite'nin açısal olarak oluşturulmuş bir jquery alt kümesi olduğunu anlayabilirsiniz.

Bu seçiciler çalışmaz , çünkü tek başına jqLite ile seçiciler id tarafından desteklenmemektedir.

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

Bu yüzden ya :

• jqLite'ı yalnızca jquery'den daha sınırlı, ancak çoğu durumda yeterli kullanırsınız.
• veya tam jQuery lib'i uygulamanıza ekleyebilir ve gerçekten jquery'ye ihtiyacınız olan yerlerde normal jquery gibi kullanabilirsiniz.

Düzenleme: jqLite öncelikli olması için jQuery angularJS önce yüklenmesi gerektiğini unutmayın:

DOMContentLoaded olayı başlatılmadan önce yüklenmesi koşuluyla, gerçek jQuery her zaman jqLite'den önceliklidir.

Edit2: Sorunun ikinci bölümünü daha önce kaçırdım:

İle sorunu <input type="number">, ben düşünüyorum o, o amaçlanan davranış bir açısal konudur değildir yerli html5 numarası elemanı.

Jquery .val()veya raw .valueözniteliği ile almaya çalışsanız bile sayısal olmayan bir değer döndürmez .

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

eşittir

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

Açısal kullanmanın doğru yolu olduğunu düşünmüyorum. Bir çerçeve yöntemi yoksa, oluşturmayın! Bu, çerçevenin (burada açısal) bu şekilde çalışmadığı anlamına gelir.

Açısal ile DOM'u bu şekilde değiştirmemelisiniz (jquery yolu), ancak

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

Ya da üzerinde tam denetime sahip olmak için kendi direktifinizi (kendi DOM bileşeniniz) oluşturun.

BTW, http://caniuse.com/#search=queryselector querySelector iyi desteklenmektedir ve bu nedenle güvenle kullanabilirsiniz.

Eğer yudum kullanan biri varsa, kullanırsak bir hata gösterir document.getElementById()ve kullanılmasını önerir, $document.getElementById()ancak işe yaramaz.

Kullan -

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

$ Document kullanarak öğelere erişebilirsiniz ($ document enjekte edilmelidir)

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

veya açısal eleman ile belirtilen elemanlara şu şekilde erişilebilir:

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');

Denetleyicinize $ document enjekte etmeli ve orijinal belge nesnesi yerine kullanmalısınız.

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

Jquery stil öğesi kaydırmasına ihtiyacınız yoksa, $ document [0] .querySelector ('# MyID') size DOM nesnesini verecektir.

Bu benim için iyi çalıştı.

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

Kaiser yanıtında iyileşme:

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

$documentDirektifinize enjekte etmeyi unutmayın

Belki burada çok geç kaldım ama bu işe yarayacak:

var target = angular.element(appBusyIndicator);

Dikkat, yok appBusyIndicator , düz kimlik değeridir.

Perde arkasında neler oluyor: (bir div'a uygulandığı varsayılarak) (angular.js satır no: 2769'dan alınmıştır ...)

/////////////////////////////////////////////
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);
  }

Varsayılan olarak sayfada jQuery yoksa, jqLite kullanılır. Bağımsız değişken dahili olarak bir id olarak anlaşılır ve karşılık gelen jQuery nesnesi döndürülür.