如何按类名或ID获取元素

Question

我试图通过angularjs在html中找到元素.

这是html:

<button class="btn btn-primary multi-files" type="button">
   <span>Choose multiple files</span>
</button>
<br/><br/>
<input ng-file-select type="file" multiple  style="display: none"/><br/>

我试图通过类名多文件获取按钮元素,然后我尝试了

var multibutton = angular.element(element.getElementsByClassName(".multi-files"));

但它不起作用,并尝试element.find但它只适用于标签.

是否有任何函数可以在angularjs中通过id或classname获取元素？

Answer 1

getElementsByClassName是DOM Document上的一个函数.它既不是jQuery也不是jqLit​​e函数.

使用时不要在类名前添加句点:

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

将它包装在jqLit​​e中(如果在Angular之前加载jQuery,则为jQuery):

var wrappedResult = angular.element(result);

如果要从element指令的链接函数中进行选择,则需要访问DOM引用而不是jqLit​​e引用 - element[0]而不是element:

link: function (scope, element, attrs) {

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

或者你可以使用这个document.querySelector功能(如果按类选择,需要这里的时间段):

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

演示: http ://plnkr.co/edit/AOvO47ebEvrtpXeIzYOH？p =preview

Answer 2

你不必添加.in getElementsByClassName,即

var multibutton = angular.element(element.getElementsByClassName("multi-files"));

要不就

angular.element('.multi-files');

应该做的伎俩.

此外,从本文档 "如果jQuery可用,angular.element是jQuery函数的别名.如果jQuery不可用,angular.element委托给Angular的内置jQuery子集,称为"jQuery lite"或"jqLit​​e. ""

Answer 3

@tasseKATT的答案很棒,但如果你不想制定指令,为什么不使用$document？

.controller('ExampleController', ['$scope', '$document', function($scope, $document) {
  var dumb = function (id) {
  var queryResult = $document[0].getElementById(id)
  var wrappedID = angular.element(queryResult);
  return wrappedID;
};

PLUNKR