设置指令模板中使用的文本框的焦点

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