Wie zu bearbeiten und speichern mit Direktive in angular js

Question

Ich möchte Inhalte in ausgewählten Direktive bearbeiten und speichern. Die Direktive wird von ng-Repeat aufgefüllt. Auf Schaltfläche klicken sichtbare Elemente auf Eingabefeld ändern sollen und wieder auf klicken, um es

Richtlinie umkehren soll, ist

.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

Problem auf Klick ist alles Richtlinie in editierbare und umgekehrt geändert wird. Wie kann ich es auf ausgewählten Satz der Richtlinie

Answer 1

arbeiten Versuchen Sie etwas wie folgt. Es ist viel einfacher, eine template mit einer Direktive zu verwenden, als zu versuchen, die HTML direkt zu ändern.

Richtlinie

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

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> 

Ich habe Ihre Plunker here gegabelt.