Как сфокусироваться на поле ввода шаблонов при замене в angularjs

Noob.js и angularjs здесь нуб, так что будьте осторожны :).

Я использую meanjs для своего стека.

Я настроил функцию редактирования щелчком мыши, используя замену шаблона, чтобы добавить поле ввода, но я не могу понять, как автоматически установить фокус на поле ввода один раз при изменении шаблона. Моя директива выглядит так:

angular.module('core').directive("clickToEdit", function(){
    var editorTemplate = '<div class="click-to-edit">' +
        '<div data-ng-click="enableEditor()" data-ng-hide="view.editorEnabled">' +
            '{{value}} ' +
        '</div>' +
        '<div data-ng-show="view.editorEnabled">' +
            '<input data-ng-model="view.editableValue" data-ng-blur="disableEditor()" />' +
        '</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();
           };
        }
     };
 });

angularjs angularjs-directive angularjs-scope meanjs
person Finglish    schedule 17.11.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете использовать функцию focus() для элемента, как в простом JS. Один трюк: я обернул его в $timeout, чтобы шаблон отображался.

<!doctype html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
    </head>
    <body ng-app="plunker" ng-controller="MainCtrl">
        <div click-to-edit="value"></div>
    </body>
    <script>
        var app = angular.module('plunker', []);
        app.controller('MainCtrl', ['$scope', function($scope) {
            $scope.value="Click to edit";
        }]).directive("clickToEdit", function(){
            var editorTemplate = '<div class="click-to-edit">' +
                '<div data-ng-click="enableEditor()" data-ng-hide="view.editorEnabled">' +
                    '{{value}} ' +
                '</div>' +
                '<div data-ng-show="view.editorEnabled">' +
                    '<input data-ng-model="view.editableValue" data-ng-blur="disableEditor()" />' +
                '</div>' +
             '</div>';

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

                    $scope.enableEditor = function() {
                        $scope.view.editorEnabled = true;
                        $scope.view.editableValue = $scope.value;
                        var input = $element.find('input');
                        $timeout(function() {
                            input[0].focus();
                        });
                    };

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

                    $scope.save = function() {
                         $scope.value = $scope.view.editableValue;
                         $scope.disableEditor();
                   };
                }
             };
         });
    </script>
</html>

person Kostya Shkryob    schedule 17.11.2014