angular.element vs document.getElementById or jQue

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 <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.

Any pointers/answers appreciated.

Thanks.

Answer 1

Improvement to kaiser's answer:

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

Don't forget to inject $document into your directive

Answer 2

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

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

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.

Answer 3

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.

Answer 4

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

Answer 5

This worked for me well.

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

Answer 6

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