例如：

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

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

设置replace: true
设置transclude: "element"
使用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" />

Answer 2

您要做的是replace:true，但保留"=ngModel"

replace:true,
scope:{
  mymodel:"=ngModel",
  editing:"=allowEdit"
}

继承人Plunker

Answer 3

我认为使用replace : true可以让您替换原始内容。看看这个StackOverflow答案： Here

如果您有更多的指令，我可以继续使用它，但希望您可以使用其他答案的plnkr来解决它。

包含其元素的Angular属性指令

3 个答案:

plunker link

例如：

JS：

HTML：