如何在angularjs中替换模板输入字段答案

【问题标题】：How to focus on a templates input field on replace in angularjs如何在angularjs中替换模板输入字段
【发布时间】：2015-01-14 18:04:09
【问题描述】：

node.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

【解决方案1】：

您可以像在简单的 JS 中一样对元素使用 focus() 函数。一个技巧：我把它包裹在 $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>

【讨论】：