How to get element by classname or id

by

getElementsByClassName is a function on the DOM Document. It is neither a jQuery nor a jqLite function.

Don’t add the period before the class name when using it:

var result = document.getElementsByClassName("multi-files");

Wrap it in jqLite (or jQuery if jQuery is loaded before Angular):

var wrappedResult = angular.element(result);

If you want to select from the element in a directive’s link function you need to access the DOM reference instead of the the jqLite reference – element[0] instead of element:

link: function (scope, element, attrs) {

  var elementResult = element[0].getElementsByClassName('multi-files');
}

Alternatively you can use the document.querySelector function (need the period here if selecting by class):

var queryResult = element[0].querySelector('.multi-files');
var wrappedQueryResult = angular.element(queryResult);

Demo: http://plnkr.co/edit/AOvO47ebEvrtpXeIzYOH?p=preview

More Related Contents:

  1. Is this a “Deferred Antipattern”?
  2. angular.service vs angular.factory
  3. How to add custom validation to an AngularJS form?
  4. AngularJS 1.5+ Components do not support Watchers, what is the work around?
  5. Angular HttpPromise: difference between `success`/`error` methods and `then`’s arguments
  6. How do you prevent duplicate user properties in Firebase?
  7. What is the difference between ng-if and ng-show/ng-hide
  8. Link vs compile vs controller
  9. Angular.js directive dynamic templateURL
  10. How to format date in angularjs
  11. Using protractor with loops
  12. Angularjs $q.all
  13. Angularjs loading screen on ajax request
  14. AngularJS UI Router – change url without reloading state
  15. Reading response headers when using $http of Angularjs
  16. inline conditionals in angular.js
  17. angular directive encapsulating a delay for ng-change
  18. Angular: ng-bind-html filters out ng-click?
  19. How can I test an AngularJS service from the console?
  20. Angularjs ui-router. How to redirect to login page
  21. localStorage vs sessionStorage vs cookies
  22. Send multipart/form-data files with angular using $http
  23. AngularJS leaves comments in HTML: is it possible to remove them?
  24. ng-options with disabled rows
  25. How/when to use ng-click to call a route?
  26. AngularJS: ngInclude vs directive
  27. angularjs 1.x support lifecycle and end-of-life
  28. Binding inputs to an array of primitives using ngRepeat => uneditable inputs
  29. Two views in one AngularUI Router state sharing scope
  30. How to ‘unwatch’ an expression

Leave a Comment