角度jsでディレクティブを使用して編集と保存を切り替える方法

Question

選択したディレクティブでコンテンツを編集して保存したい。このディレクティブはng-repeatによって読み込まれます。ボタン上に表示項目が入力フィールドに変更し、再びそれが

指令を逆にする必要がありクリックする必要がありますクリックする問題は、すべてのディレクティブが編集可能またはその逆に変更され、クリックの上にある

.directive('component', function() { 
    var link = function(scope, element, attrs) { 
    var render = function() { 
     var t = scope.layouts[scope.type][attrs.indexs]; 
     var icon = scope.layouts[scope.type][attrs.indexs]; 
     var v = attrs.value; 
     if(scope.type=="edit"){ 
     element.html('<input type="' + t + '" ng-model="vm.name" value="'+v+'">'); 
     if(attrs.indexs==1){ 
     element.html('<' + t + '>Save'); 
     }} 
     if(scope.type=="display"){ 
     element.html('<' + t + ' ng-model="'+v+'" >'+v+'</'+t+'>'); 
     if(attrs.indexs==1){ 
     element.html('<' + t + ' >Edit'); 
     }}}; 
    scope.$watch('type', function(newValue, oldValue) { 
     render(); 
    }); 

    }; 
    return { 
    restrict : 'E', 
    link : link 
    } 
}); 

plunker Link

です。 選択したディレクティブのセットに対してどのように動作させることができますか

Answer 1

以下のように試してみてください。ディレクティブでtemplateを使用する方が、htmlを直接変更しようとするよりもはるかに簡単です。

指令

angular.module('myApp', []) 
.controller('MyController', MyController) 
.directive('component', function(){ 
     return { 
     template: [ 
      '<div>', 
      '<span style="font-weight:bold" ng-show="!editing">{{ value }} <button ng-click="editing = true">Edit</button></span>', 
      '<span ng-show="editing"><input type="input" ng-model="value"><button ng-click="editing = false">Save</button></span>', 
      '</div>' 
     ].join(''), 
     restrict: 'E', 
     scope: { 
      value: '=value' 
     }, 
     link: function($scope){ 
      $scope.editing = false; 
     } 
     } 
}); 

私はあなたのplunker hereをフォークしてきたHTML

<div class="col-sm-12" ng-repeat="s in vm.allCat track by $index"> 
    <div class="col-sm-1 text-muted">Name</div> 
    <div class="col-sm-9 text-left"> 
     <component value="s.name"></component> 
    </div> 
    </div> 
</div> 

。