angular.element vs document.getElementById немесе айналдыруы бар (бос емес) jQuery селекторы

Мен Spin басқару элементінің «бұрышталған» нұсқасын мына жерде құжатталғандай қолданамын: http://blog.xvitcoder.com/adding-a-weel-progress-indicator-to-your-angularjs-application/

Көрсетілген шешімге ұнамайтын нәрселердің бірі - jQuery қызметін пайдалану, ол DOM элементіне спинді басқаруды тиімді түрде қосады. Мен элементке қол жеткізу үшін бұрыштық конструкцияларды қолданғым келеді. Мен сондай-ақ, элемент идентификаторынан қызмет көрсету ішінде тіркелу керек және орнына идентификаторды қызметте (singleton) орнататын директиваны қолданып, қызмет көрсетудің басқа пайдаланушылары немесе Қызметтің өзі бұл туралы білудің қажеті жоқ.

Мен бұрыштама.элементтің бізбен бірдей элемент идентификаторында қандай document.getElementById дегеніне қарсы күресетінін білемін. мысалы. Бұл жұмыс істейді:

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

Олардың ешқайсысы:

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

Мен анық түрде қателесіп кету керек нәрсе жасаймын! Кез келген адам көмектесе алады ма?

Жоғарыда келтірілген жұмысқа қол жеткізе аламын деп ойласам, jQuery элементіне деген қолжетімділікті алмастыруға тырысып, ұқсас мәселе бар: мысалы $ (target) .fadeIn («жылдам»); жұмыс істейді     angular.element ('# appBusyIndicator') fadeIn («жылдам») немесе angular.element ('appBusyIndicator') fadeIn («жылдам»)

Can someone point me to a good example of documentation that clarifies use of an Angular "element" vs the DOM element? Angular obviously "wraps" the element with its own properties, methods etc but it's often hard to get the original value. For example if I have an <input type='number'> field and I want to access the original contents that are visible in the ui when the user types "--" (without the quotes) I get nothing, presumably because the "type=number" means Angular is rejecting the input even though it's visible in the UI and I want to see it so I can test for it and clear it down.

Кез-келген көрсеткіш/жауап жоғары бағаланды.

Рахмет.

133
angular.element - jQuery нысаны немесе jQuery нысаны.
қосылды автор Neil, көзі

10 жауаптар

мүмкін келесідей жұмыс істейді:

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

Document.querySelector() бөліміне орап, native Javascript angular.element() қоңырауына қоңырау шалыңыз. Сондықтан jQuery қол жетімді/жүктелгеніне қарамастан, сіз әрқашан элементін jqLite немесе jQuery нысанында аласыз.

angular.element үшін ресми құжаттама:

Егер jQuery болса, angular.element jQuery функциясы үшін бүркеншік болып табылады. Егер jQuery қолжетімсіз болса, angular.element jQuery деп аталатын jQuery ішіндегі кірістірілген бұрыштық > jqLite .

     

Angular ішіндегі барлық элемент сілтемелер әрдайым jQuery немесе jqLite (мысалы, директивалар компиляция немесе сілтеме функциясындағы элемент аргументі) . Олар DOM сілтемелерін ешқашан өңдемейді.

document.querySelector() дегенді неге пайдалану керек деп ойласаңыз, бұл жауапты оқыңыз.

203
қосылды
Document.getElementById() бағдарламасын жай ғана пайдалану үшін document.querySelector ('# ...') қандай да бір себеппен болар еді.
қосылды автор Kato, көзі
@Kato Қосымша ақпарат бұл жауап . Бұл көмектеседі деп үміттенемін.
қосылды автор kaiser, көзі
Бұны бұрыштық элементінде де жасауға болады: var elDivParent = angular.element (elem [0] .querySelector ('# an-id')), элемент бұрыштық элемент болып табылады. Осылайша, элементтің ішінде іздеуге болады. Бірліктерді сынау үшін пайдалы.
қосылды автор unludo, көзі
Google Maps API-мен жұмыс істеу және бұл жұмыс істеді: var autocomplete = new google.maps.places.Autocomplete ($ document [0] .querySelector ('# address'), {түрлері: ['geocode'], componentRestrictions: {Ел: 'us'}}); . @Kaiser кеңесіне рақмет. Кейбір себептермен api карталар angular.element (document.querySelector ('# address')) қолданған кезде бірінші парамда өткенімнің кіріспейтінін айтты, бірақ бәрі аяқталады жақсы.
қосылды автор nymo, көзі

Сіз әлі жоқ болса, бұрыштық элементін оқыңыз, сондықтан сіз jqLite және -jqlite - бұл бұрышқа салынған jQuery жиыны.

Идентификатормен селекторлары қолдау көрсетілмегендіктен, jqLite көмегімен жалғыз таңдаушылар жұмыс істемейді.

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

Мәселен, не:

  • Сіз jqlite-ге қарағанда, jqlite-ді қолдана аласыз, бірақ көп жағдайда жеткілікті.
  • немесе сіз сіздің jQuery-ді толықтырып, оны jquery-ге қажет болатын жерлерде қолданғаныңыз жөн.

Өңдеу: jQuery jqLite артықшылығын алу үшін angularJS дейін жүктелетінін ескеріңіз:

Real jQuery әрқашан jqLite-ден артықшылығын алады   DOMContentLoaded оқиға басталғанға дейін жүктелген.

Edit2: Мен бұрын сұрақтың екінші бөлігін жіберіп алдым:

<input type = «number»> деген мәселе native html5 элементінің нөмірі.

Егер сіз jqueryтің .val() немесе шифры .value атрибутымен шығарып алуға тырыссаңыз да, сандық емес мәнді қайтармайды.

44
қосылды
Angular.js файлына дейін немесе кейін jQuery қосасыз ба? Бұғанадан дейін қосылуы керек. i бойынша селекторлар jQuery қол жетімді: jsbin.com/ohumiy/1/ өңдеу
қосылды автор gargc, көзі
Менің 2-ші нүктемде элементтің мазмұнын шығару үшін қолданылатын $ мәнін, бірақ кіріс түрі = санында пайдаланушының кіруі бар «-» бұл бос. Меншікті сипатқа $ rawInputValue элементінде элементтің мазмұнын көру үшін Бұрыштық басылғанға дейін «» керек, себебі «-» әлі де менің директиваға жүйелі түрде кіре алмасам да, UI ішінде.
қосылды автор irascian, көзі
Олар басқа директивада жұмыс істейді (мысалы, идентификаторға қол жеткізу үшін бұрыштық. Мәселе, бұл басқару элементтері осы элементке қосылу арқылы жұмыс істейді, бірақ мен неге бірдей jQuery баламасының жұмыс істеуі керек екенін түсінбеймін. JQuery-ті тікелей менің директивім HAS жабық тэг болуы үшін - өздігінен жабылатын тег жұмыс істемейді (қате ғана бос экран), бұл мені басқаруды күдіктендіреді.
қосылды автор irascian, көзі
Бізде толық jQuery кітапханасы бар, әйтпесе жоғарыда түсіндірілген $ сценарийі жұмыс істемейді. Менің сұрағым, неге $ жұмыс істейді, бірақ бұрыштық.элемент жоқ - толық jQuery қол жетімді болса да.
қосылды автор irascian, көзі
var target = document.getElementById('appBusyIndicator');

тең

var target = $document[0].getElementById('appBusyIndicator');
21
қосылды
Сіздің тәуелділіктеріңіз айқын және мазалайтындығына көз жеткізу үшін екінші мысалды қолданған дұрыс.
қосылды автор Luke, көзі

Мен бұрыштықты пайдаланудың дұрыс жолы деп ойламаймын. Негіздемелік әдіс болмаса, оны жасамаңыз! Бұл шеңбер (бұрыштық) осылайша жұмыс істемейді.

Бұрышпен DOM-ды (jquery жолымен) басқаруға болмайды, бірақ бұрыштық көмекшіді қолданыңыз

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

Немесе оған толық бақылау жасау үшін өзіңіздің директиваңызды (өзіңіздің DOM компонентіңізді) жасаңыз.

BTW, мұнда сіз көре аласыз http://caniuse.com/#search=queryselector querySelector жақсы қолдау көрсетіледі және де қауіпсіз пайдалануға болады.

17
қосылды
Сіз өте дұрыссыз. 90% + DOM-ді қолмен басқару керек деп ойладым, қажет болса, кодты қайтадан аяқтадым және соңында код әлдеқайда таза.
қосылды автор Stephen Chung, көзі

$ Құжатты қолдана отырып, элементтерге қол жеткізуге болады ($ құжат енгізу керек)

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');
13
қосылды
find() - Тег атауы бойынша іздеуге шектелген
қосылды автор RJV, көзі
angular.element (құжат) .find ('. someClass'); өте жақсы жұмыс істейді.
қосылды автор Nishant Baranwal, көзі

Егер біреу біреуді пайдаланса, document.getElementById() қолдансаңыз, ол $ document.getElementById() пайдалануды ұсынады, бірақ ол жұмыс істемейді.

Пайдалану -

$document[0].getElementById('id')
12
қосылды
Неге бұрыштық массивді инъекциялау керек?
қосылды автор Peter, көзі

Сіз өзіңіздің контроллеріңізге $ құжат салып, түпнұсқалық құжат нысанының орнына қолданыңыз.

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

Егер jQuery стилінің элементіне қажет болмаса, $ document [0] .querySelector ('# MyID') сізге DOM нысанын береді.

9
қосылды
Сондай-ақ, angulars $ құжат айналымын пайдаланудың орнына тікелей window.document-ке сілтеме жасай аласыз.
қосылды автор MatBee, көзі
Әрине, сіз $ unit-дан құжатыңызды шабыттандыруға қатысты алаңдамаңыз
қосылды автор Adamy, көзі
@realnot сіз HTML DOM құжатының нысанын JavaScript ішіндегі кез келген жерден қол жеткізе аласыз. w3schools.com/jsref/dom_obj_document.asp
қосылды автор Adamy, көзі
Мен үшін түсініксіз: бұл ескертуді аламын: әдепкі құжат нысанының орнына $ құжат қызметін пайдалану керек, бірақ бұл нені білдіреді? Бұл туралы кез-келген құжат? Рахмет!
қосылды автор realnot, көзі

Бұл мен үшін жақсы жұмыс істеді.

angular.forEach(element.find('div'), function(node)
{
  if(node.id == 'someid'){
    //do something
  }
  if(node.className == 'someclass'){
    //do something
  }
});
6
қосылды
Мұны жасамаңыз. Басқа мысалдардың бірін пайдаланыңыз. Бұл ешқашан хэш кестесінің іздеу оңтайландыруларын қолданады.
қосылды автор MatBee, көзі
элемент анықталмады? angular.element.find JQueryсіз өзіңіздің жұмысыңызды істейтін функция емес.
қосылды автор landed, көзі

Мүмкін, мен тым кеш, бірақ бұл жұмыс істейді:

var target = angular.element(appBusyIndicator);

Назар аударыңыз, appBusyIndicator жоқ, бұл қарапайым ID мәні.

Сахналардың артында не болып жатады: (егер ол дивизияда қолданылған болса) (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 болмаса, jqLite пайдаланылады. Аргумент идентификатор ретінде ішкі түрде түсініледі және сәйкес jQuery нысаны қайтарылады.

3
қосылды
сіздің бетіңізде jQuery бар ма?
қосылды автор Vishal Anand, көзі
Мен дәл қазір бұрыш 1.5.8-де сынап көрдім. Кәдімгі идентификатор бос нәтижені қайтарады. angular.element («# myId») жақсы жұмыс істейді.
қосылды автор Gosha U., көзі

Кайзердің жауабын жақсарту:

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

Сіздің директиваға $ document енгізуді ұмытпаңыз

3
қосылды
Шындығында соңында қосымша жақша болмауы керек ...
қосылды автор shashanka n, көзі
element.find үшін бұрыштық құжаттамада көрсетілгендей: find() - Тег атауы бойынша іздеуге шектелген , ол идентификаторларда жұмыс істемейді. Сондай-ақ сізде қосымша жабу ) .
қосылды автор paaat, көзі