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

简而言之：

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

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

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

感谢您的帮助！

我希望这回答了你的问题：
在指令选项中：

1. set replace: true
2. set transclude: "element"
3. use ng-transclude无论您想将原始元素放置在包装模板中的何处。

笨蛋链接 http://plnkr.co/edit/vyhJcH9OVMyP9gEB55yl?p=preview

example:

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" />