變形標籤到輸入

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

     }] 
    }; 
});