javascript - 包装其元素的 Angular 属性指令

Question

就像标题所说，我正在尝试创建一个包装其父级的属性指令，并允许我在编辑和显示实际模型值之间切换。

简而言之:

<input ng-model="model" allow-edit="editing" />

最终看起来像:

<div>
    <div ng-hide="editing">{{model}}</div>
    <input ng-show="editing" ng-model="model"></input>
</div>

如果一切顺利。

但是，我不断得到更多类似的东西:

<input ng-model="model">
    <!-- html from allow-edit directive's template --!>
</input>

我在这里使用输入作为示例，但我也希望能够包装任意内容(选择等)...

有人能够制作一个将其他内容包装在同一元素上的指令吗？有没有我没有考虑的更好的方法来做到这一点？

感谢您的帮助!

Answer 1

我希望这能回答您的问题:
在指令选项中:

1. 设置替换:true
2. 设置嵌入:“元素”
3. 在您想要将原始元素放入包装模板中的任何位置使用 ng-transclude。

plunker link

示例:

js:

var app = angular.module("test", []);

app.directive("myCustomInput", function($rootScope){
  return{
    restrict: "A",
    replace: true,
    transclude: "element",
    template: "<div class='input-wrap'>"+
    "<div ng-transclude></div>"+
    "<i class='glyphicon glyphicon-chevron-down'></i>"+
    "</div>"
    
  }
});

HTML:

<input my-custom-input type="text" />