Question

我试图将单元格设置为输入，如果它被列定义变量设置为可编辑但我不是很成功。这是我的指示

app.directive('bsCell', function() {
  return {
    scope: {
      data : '=',
      editable : '='
    },
    transclude: true,
    restrict: 'EA',
    template: function(tElement, tAttrs){
      console.log("---"); 
      console.log(tAttrs.editable);
      console.log(tElement); 

      var templateEdit = '<input class="form-control" ng-model="data">{{editable}}';
      var templateRead = '{{data]}}{{editable}}'; 
      return tAttrs.editable ? templateEdit : templateRead;
    },
  };
});

这是一个展示问题http://plnkr.co/edit/Nl5NHBvwh9FErFhu1GU8?p=preview的问题有人可以指出我正确的方向吗？

Answer 1

不支持模板切换，并且在这种特定情况下可能不是最好的想法。指令定义只是加载组件。无论如何，任何其他逻辑都应该在组件内。

所以你的模板可以是

<div>
<div ng-show="editable" ><input class="form-control" ng-model="data">{{editable}}</div>
<div ng-show="!editable">{{data}}{{editable}}</div>
</div

如何根据Angular中的属性自定义指令模板？

1 个答案: