angularjs - 将标签变形为输入

Question

Angular中将数据切换到“编辑模式”的正确方法是<label>什么<input type='text'>？我想在运行时创建和销毁 DOM 元素，而不是首先将所有输入呈现为隐藏状态（然后显示它们，并在切换到编辑模式时隐藏标签）。

Answer 1

类似这个 jsfiddle的东西应该适合你。它仍在隐藏/显示，但输入不需要预先在 DOM 中。可能有一百万种替代方法来处理这个问题，但我认为这至少可以演示如何将功能放入指令中。

HTML：

<label inline-edit>Edit me</label>

指示：

'use strict';
var app = angular.module('myApp', []);
app.directive('inlineEdit', function() {
    return{
        restrict: 'A',
        transclude: true,
        template: '<label class="editing" data-ng-transclude></label>',
        controller: ['$scope','$element','$transclude',function($scope, $element, $transclude) {
            $transclude(function(clone) {
                $scope.transcluded_content = clone[0].textContent;
            });
            $element.bind('click', function(){
                $element.hide().after('<input type="text" value="'+$scope.transcluded_content+'" />');

                $element.next().focus().blur(function (){
                    $scope.transcluded_content = $element.next().val();
                    $element.html($scope.transcluded_content);
                    $element.next().hide();
                    $element.show();
                });
            });

        }]
    };
});