キュウリフォーカスmd-list-item

Question

私はアンギュラマテリアルでウェブサイトを作成しており、キュウバースクリプトを使ってテストしています。キュウリに焦点を当てることは可能ですか？

私はIDを与えようとしましたが、キュウリはその要素を見つけることができません。

Answer 1

自動的に生成されたHTMLタグにクラス名を動的に追加することができます。

はたとえば、以下のようなリストを作成しました：

<md-list flex> 
    <md-list-item class="md-3-line tobe-reviewed-kudo-item" ng-repeat="kudo in kudos | filter : {kudosStatus: 'Pending'} | limitTo : 3" ng-click="toReviewKudo(kudo.kudosId)"> 
     <img ng-src="img/avatar.png" class="md-avatar" alt="{{item.who}}" /> 
     <div class="md-list-item-text" layout="column"> 
      <h3>{{kudo.chEmployeeByKudosSenderId}} sent {{kudo.chEmployeeByKudosReceiverId}}</h3> 
      <p>{{kudo.createdOn}}</p> 
     </div> 
     <p>{{kudo.kudosStatus}}</p> 
     <md-divider></md-divider> 
    </md-list-item> 
</md-list> 

をあなたはMD-リスト項目を集中するキュウリのスクリプトを使用する場合は角度素材を動的にクリック可能なボタンを生成しますので、それは動作しません。キュウリのスクリプトにフォーカスを当てるために、これらのボタンにクラス名を付ける必要があります。

が

$scope.$watch("$viewContentLoaded", function() { 
var kudoItemsDOM = document.getElementsByClassName("tobe-reviewed-kudo-item"); 
var kudoItems = angular.element(kudoItemsDOM); 
for(var i = 0; i < kudoItems.length; i++) { 
angular.element(kudoItems[i].querySelector(".md-ink-ripple")).addClass("kudo-item-btn"); 
} 
}); 

その後、工藤項目-BTNはHTMLに追加され、キュウリは、これらのボタンを集中することができます：私たちはデータをバインドした後そこで、我々は、クラス名を与えるためにブローコードを使用することができます。