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文档的一个函数。它既不是jQuery也不是jqLite函数。

使用时不要在课程名称前加上句号：

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

将其包装在jqLite中（如果在Angular之前加载jQuery，则为jQuery）：

var wrappedResult = angular.element(result);

如果要从指令的链接函数中的element中进行选择，则需要访问DOM引用而不是jqLite引用 - 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

您不必在.中添加getElementsByClassName，即

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

但是，使用angular.element时，必须使用jquery样式选择器：

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

应该做的伎俩。

此外，从this documentation＆＃34;如果jQuery可用，angular.element是jQuery函数的别名。如果jQuery不可用，angular.element会委托给Angular的内置jQuery子集，称为＆＃34; jQuery lite＆＃34;或＆＃34; jqLite。＆＃34;＆＃34;

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

Answer 4

如果您只想按类别名称查找按钮并仅使用jQLite，您可以执行以下操作：

var myListButton = $document.find('button').filter(function() {
    return angular.element(this).hasClass('multi-files');
});

希望这会有所帮助。：）

如何按类名或ID获取元素

4 个答案: