angularjs - 将标签变形为输入

Question

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

Answer 1

类似 this 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();
                });
            });

        }]
    };
});