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

<强> 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>

我已经分叉了你的傻瓜here。

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

1 个答案: