クラス名または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 Documentの関数です。これは、jQuery関数でもjqLit​​e関数でもありません。

使用時にクラス名の前にピリオドを追加しないでください：

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

jqLit​​e（またはjQueryがAngularの前にロードされている場合はjQuery）でラップします。

var wrappedResult = angular.element(result);

あなたがから選択する場合elementディレクティブのリンク機能であなたの代わりにjqLit​​e参照の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

つまり、.in を追加する必要はありません。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」または「jqLit​​e」と呼ばれる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;
};

プランカー

ボタンをクラス名のみで検索し、jQLiteのみを使用したい場合は、以下のようにします。

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

お役に立てれば。:)