클래스 이름 또는 ID로 요소를 얻는 방법

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 또는 클래스 이름으로 요소를 가져올 수있는 함수가 있습니까?

getElementsByClassNameDOM 문서의 함수입니다. jQuery도 jqLite 함수도 아닙니다.

사용할 때 클래스 이름 앞에 마침표를 추가하지 마십시오.

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

jqLite (또는 jQuery가 Angular보다 먼저로드 된 경우 jQuery)로 래핑합니다.

var wrappedResult = angular.element(result);

당신이 선택하려는 경우 element지시문의 링크 기능에 당신하여 jqLite 참조 대신 DOM 참조에 액세스해야 - 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

당신은 추가 할 필요가 없습니다 .에를 getElementsByClassName, 즉

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

그러나 angular.element를 사용할 때는 jquery 스타일 선택기를 사용해야합니다.

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

트릭을해야합니다.

또한 이 문서에서 "jQuery를 사용할 수있는 경우 angular.element는 jQuery 함수의 별칭입니다. jQuery를 사용할 수없는 경우 angular.element는"jQuery lite "또는"jqLite "라고하는 Angular의 기본 제공 jQuery 하위 집합에 위임합니다. ""

@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

클래스 이름으로 만 버튼을 찾고 jQLite 만 사용하려면 다음과 같이 할 수 있습니다.

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

도움이 되었기를 바랍니다. :)