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

        }]
    };
});

将变形标签转换为输入

1 个答案: