angularjs - ディレクティブ テンプレートで使用されるテキスト ボックスのフォーカスを設定します

Question

データモデルに基づいてテキストボックスを表示するディレクティブを使用しています。データモードが編集状態の場合、テキストボックスを表示します。レンダリング時にテキストボックスのフォーカスを設定する必要があります。試してみましたが、何も見つかりませんでした。助けてください。以下はレビュー用の例です。

var myModule = angular.module('myModule', []);
myModule.directive('textbox', function() {
  return {
    restrict: 'E',
    replace: true,
    template: '<div ng-if="data.mode==edit"> <input type="text" ng-model="data.value"/> </div>',
    link: function (scope, element, attrs) 
    {
      scope.data =  {"mode":"edit","value":"This is text box"};
    }
  };
});

JSFiddle

Answer 1

これでうまくいきます。

scope.$watch('data.mode', function(newValue, oldValue) {
  if (newValue == 'edit') {
    element.find('input')[0].focus();
  }
});

JSFiddle