Angularjs 如何在angular js中使用指令切换编辑和保存

我要编辑并保存所选指令中的内容。该指令由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
  }
});

.directive（'component'，function（）{
变量链接=函数（范围、元素、属性）{
var render=function（）{
var t=scope.layouts[scope.type][attrs.indexs]；
var icon=scope.layouts[scope.type][attrs.indexs]；
var v=属性值；
if（scope.type==“编辑”）{
html（“”）；
如果（属性索引==1）{
html（'Save'）；
}}
if（scope.type==“显示”）{
html（“”+v+“”）；
如果（属性索引==1）{
html（'Edit'）；
}}};
范围.$watch（'type'，函数（newValue，oldValue）{
render（）；
});
};
返回{
限制：'E'，
链接：链接
}
});

问题是点击所有指令更改为可编辑，反之亦然。

---

如何使其在选定的指令集上工作

请尝试以下操作。使用带有指令的

模板

比直接修改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;
         }
      }
});

angular.module（'myApp'，[]）
.controller（'MyController'，MyController）
.directive（'component'，function（）{
返回{
模板：[
'',
“{value}}Edit”，
“保存”，
''  
].加入（“”），
限制：'E'，
范围：{
值：'=值'
},
链接：功能（$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>

名称

我用叉子叉了你的东西