2016-05-27 8 views
0

かなり新しいjavascriptになります。次のタグで不思議に思っていましたが、手動でIdsを入れなければならないのですが、.focus()をコンテナ(カスタムディレクティブ)に設定する方法はありますか?IDをハードコーディングせずにカスタムカスタムディレクティブのフォーカスを取得するにはどうすればよいですか?

<tile class="ng-scope gridster-item" tilevalue="1" gridster-item="tile" row="0" col = "0" ng-repeat="tile in selectedTiles"> </tile> 
+0

可能な重複:// stackoverflowの.com/questions/14833326/set-focus-on-input-field) –

+0

値attrとフォーカス変数を定義して、値の選択方法を定義することができます。そして、フォーカス変数が変更されたら、特別な値フィールドと比較してフォーカスを設定することができます。 $ timeoutを忘れないでください –

答えて

0

はい、カスタムディレクティブを作成し、その要素にフォーカスイベントを追加できます。 以下、カスタムディレクティブ "カスタムオンフォーカス"を作成し、そのディレクティブにフォーカスおよびブラーイベントを添付しました。

はここにここにあなたのテンプレート

<div ng-init="selectedTiles=[1,2,3,4,5]"> 
    <input type="text" custom-on-focus ng-repeat="tile in selectedTiles"/> 
</div> 

行くカスタムディレクティブのコードにある

<script> 
angular.module('demoApp') 
    .directive('customOnFocus',[function(){ 
    return { 
     restrict : 'A', 
     link : function (scope,element,attrs) { 

      var targetElem = element[0]; 

      targetElem.addEventListener("focus", focusHandler); 

      targetElem.addEventListener("blur", blurHandler); 

      function focusHandler(event) { 
       // THINGS TO DO ON FOCUS 
       // for example i am changing background color 
       event.target.style.background = "pink"; 
      } 

      function blurHandler(event) { 
       //THINGS TO DO ON BLUR 
       // reseting background color 
       event.target.style.background = "white"; 
      } 

      // Its very important to remove these events listener 
      // on scope destruction else it will cause memory leaks 

      scope.$on('$destroy',function(){ 
       targetElem.removeEventListener('focus',focusHandler); 
       targetElem.removeEventListener('blur',blurHandler); 
      }) 

     } 
    } 
}]); 

[入力フィールドにフォーカスを設定するには?](HTTPの
関連する問題