angular element vs document getElementById or jQuery selector with spin busy control

Question

I m using the  Angularised  version of the Spin control  as documented here  http   blog xvitcoder com adding-a-weel-progress-indicator-to-your-angularjs-application    One of the things I don t like about the shown solution is the use of jQuery in the service that effectively attaches the spin control to the DOM element  I would prefer to use angular constructs to access the element   I d also like to avoid  hard-coding  the id of the element that the spinner needs to attach to within the service and instead use a directive that sets the id in the service  singleton  so that other users of the service or the service itself don t need to know that   I m struggling with what angular element gives us vs what document getElementById on the same element id gives us  eg  This works     var target   document getElementById  appBusyIndicator      None of these do     var target   angular element   appBusyIndicator      var target   angular element  appBusyIndicator      I m clearly doing something that should be fairly obvious wrong   Can any one help   Assuming I can get the above working  I have a similar problem with trying to replace jQuery access to the element  eg   target  fadeIn  fast     works    angular element   appBusyIndicator   fadeIn  fast   or angular element  appBusyIndicator   fadeIn  fast   doesn t  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  lt input type  number  gt  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   Any pointers answers appreciated   Thanks

User · Answer

Maybe I am too late here but this will work :

var target = angular.element(appBusyIndicator);

Notice, there is no appBusyIndicator, it is plain ID value.

What is happening behind the scenes: (assuming it's applied on a div) (taken from angular.js line no : 2769 onwards...)

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

By default if there is no jQuery on the page, jqLite will be used. The argument is internally understood as an id and corresponding jQuery object is returned.

User · Answer

You should read the angular element docs if you haven t yet  so you can understand what is supported by jqLite and what not -jqlite is a subset of jquery built into angular   Those selectors won t work with jqLite alone  since selectors by id are not supported     var target   angular element   appBusyIndicator      var target   angular element  appBusyIndicator      So  either     you use jqLite alone  more limited than jquery  but enough in most of the situations  or you include the full jQuery lib in your app  and use it like normal jquery  in the places that you really need jquery    Edit  Note that jQuery should be loaded before angularJS in order to take precedence over jqLite      Real jQuery always takes precedence over jqLite  provided it was   loaded before DOMContentLoaded event fired    Edit2  I missed the second part of the question before   The issue with  lt input type  number  gt    I think it is not an angular issue  it is the intended behaviour of the native html5 number element   It won t return a non-numeric value even if you try to retrieve it with jquery s  val   or with the raw  value attribute

User · Answer

If someone using gulp  it show an error if we use document getElementById   and it suggest to use  document getElementById   but it doesn t work   Use -    document 0  getElementById  id

User · Answer

You should inject  document in your controller  and use it instead of original document object   var myElement   angular element  document 0  querySelector   MyID      If you don t need the jquery style element wrap   document 0  querySelector   MyID   will give you the DOM object

User · Answer

var target   document getElementById  appBusyIndicator      is equal to   var target    document 0  getElementById  appBusyIndicator

User · Answer

It can work like that  var myElement   angular element  document querySelector    some-id        You wrap the Document querySelector   native Javascript call into the angular element   call  So you always get the element in a jqLite or jQuery object  depending whether or not jQuery is available loaded  Official documentation for angular element   If jQuery is available  angular element is an alias for the jQuery function  If jQuery is not available  angular element delegates to Angulars built-in subset of jQuery  that called  quot jQuery lite quot  or jqLite  All element references in Angular are always wrapped with jQuery or jqLite  such as the element argument in a directives compile or link function   They are never raw DOM references   In case you do wonder why to use document querySelector    please read this answer

User · Answer

I don t think it s the right way to use angular  If a framework method doesnt exist  don t create it  This means the framework  here angular  doesnt work  this way   With angular you should not manipulate DOM like this  the jquery way   but use angular helper such as    lt div ng-show  isLoading  class  loader  gt  lt  div gt    Or create your own directive  your own DOM component  in order to have full control on it   BTW  you can see here http   caniuse com  search queryselector querySelector is well supported and so can be use safely

User · Answer

Improvement to kaiser s answer   var myEl    document find   some-id      Don t forget to inject  document into your directive

User · Answer

This worked for me well   angular forEach element find  div    function node      if node id     someid          do something       if node className     someclass          do something

User · Answer

You can access elements using  document   document need to be injected    var target    document   appBusyIndicator    var target    document  appBusyIndicator      or with angular element  the specified elements can be accessed as   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

[jquery] angular.element vs document.getElementById or jQuery selector with spin (busy) control

Examples related to jquery

Examples related to angularjs