Установить фокус текстового поля в директиве

0

Я экспериментирую с формой директивы inline-edit здесь: http://icelab.com.au/articles/levelling-up-with-angularjs-building-a-reusable-click-to-edit-directive/

Я хотел бы знать, как установить курсор в текстовое поле, которое создается, когда я нажимаю какой-либо текст для редактирования.

Вот директива с несколькими незначительными изменениями в шаблоне:

.directive("clickToEdit", function() {
    var editorTemplate = '<div class="click-to-edit">' +
        '<div ng-hide="view.editorEnabled" ng-click="enableEditor()">' +
            '{{value}} ' +
        '</div>' +
        '<div ng-show="view.editorEnabled">' +
            '<input ng-model="view.editableValue" ng-blur="save()">' +
        '</div>' +
    '</div>';

    return {
        restrict: "A",
        replace: true,
        template: editorTemplate,
        scope: {
            value: "=clickToEdit",
        },
        controller: function($scope) {
            $scope.view = {
                editableValue: $scope.value,
                editorEnabled: false
            };

            $scope.enableEditor = function() {
                $scope.view.editorEnabled = true;
                $scope.view.editableValue = $scope.value;
            };

            $scope.disableEditor = function() {
                $scope.view.editorEnabled = false;
            };

            $scope.save = function() {
                $scope.value = $scope.view.editableValue;
                $scope.disableEditor();
            };
        }
    };
});
  • 0
    HTML 5 атрибут autofoucs ?
Теги:

1 ответ

0

вам нужно добавить функцию ссылки следующим образом:

link : function(scope, ele, attrs) {
      scope.$watch('view.editorEnabled', function(n, o) {
          if(n) ele.find('input')[0].focus();

      })
}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню