[解決済み] クラス名や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/>

クラス名でボタン要素を取得しようとしているのですが、multi-filesで試したところ

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

しかし、うまくいかず、試しに element.find を試してみましたが、タグに対してのみ動作します。

angularjsでidやclassnameで要素を取得する関数はありますか？

どのように解決するのですか？

getElementsByClassName はDOM Documentに対する関数です。jQueryやjqLiteの関数ではありません。

使用する際は、クラス名の前にピリオドを付けないでください。

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

jqLite（Angularより先にjQueryがロードされている場合は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