web-dev-qa-db-ja.com

jqLit​​eを使用してクラス名で要素を選択する方法は？

私は、Angular.jsアプリをより軽くするためにjqueryを削除し、代わりにAngularのjqLit​​eを配置しようとしています。ただし、アプリはfind（ '＃id'）およびfind（ '.classname'）を多用します。これらはjqLit​​eでサポートされておらず、「ドキュメントによると」「タグ名」のみ

それを変える最良の方法は何だと思いますか。私が考えたアプローチの1つは、カスタムHTMLタグを作成することです。例：変更
<span class="btn btn-large" id="add-to-bag">Add to bag</span>

に

<a2b style="display:none;"><span class="btn btn-large" >Add to bag</span></a2b>

そして

$element.find('#add-to-bag')

に

$element.find('a2b')

何かご意見は？他のアイデア？

ありがとう

嘘つき

angularjsangularjs-directivejqlite
108
Lior

本質的に、@ kevin-bが指摘したとおり：

// find('#id')
angular.element(document.querySelector('#id'))

//find('.classname'), assumes you already have the starting elem to search from
angular.element(elem.querySelector('.classname'))

注：コントローラーからこれを行う場合は、「コントローラーを正しく使用する」セクションをご覧ください。 開発者ガイド プレゼンテーションロジックを適切なディレクティブ（<a2b ...>など）にリファクタリングします。

201
psema4

elem.find()が機能しない場合は、JQueryスクリプトbefore angular script ....を含めていることを確認してください。

2
ancajic

angualrはjqliteと呼ばれるjqueryの軽量バージョンを使用します。これはjQueryのすべての機能を備えていないことを意味します。ここに、jqueryから使用できるものについて、angularjsドキュメントのリファレンスがあります。 Angular Element docs

あなたの場合、IDまたはクラス名を持つdivを見つける必要があります。クラス名に使用できます

var elems =$element.find('div') //returns all the div's in the $elements
    angular.forEach(elems,function(v,k)){
    if(angular.element(v).hasClass('class-name')){
     console.log(angular.element(v));
}}

または、クエリセレクターを使用してより簡単な方法を使用できます。

angular.element(document.querySelector('#id'))

angular.element(elem.querySelector('.classname'))

jQueryほど柔軟ではありませんが、何が

1
hannad rehman