angularjs - ラベルを入力にモーフ

Question

<label>Angularでデータを「編集モード」に切り替える適切な方法は何<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();
                });
            });

        }]
    };
});