包含其元素的Angular属性指令 [英] Angular attribute directive that wraps its element

问题描述

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

like the title says, I'm attempting to make an attribute directive that wraps its parent and allows me to toggle between editing and showing the actual model value..

简而言之：

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

最终看起来像：

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

如果一切顺利。

但是，我继续得到更多的东西：

However, I keep on getting something more along the lines of:

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

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

I've used input as an example here, but I'd like to be able to wrap arbitrary content (select, etc) as well...

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

Has anyone been able to make a directive that wraps other content on the same element? Is there a better way to do this that I'm not considering?

感谢您的帮助！

推荐答案

你想要做的是 replace：true 但保持= ngModel

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

继承人 Plunker

这篇关于包含其元素的Angular属性指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！