角度ng模型转换

Question

我正在尝试创建自定义元素，这些元素将转换我的表单元素以匹配bootstrap的表单样式结构

基本上，

<my-input ng-model="myname">

应该成为

<div class="form-element">
    <input ng-model="myname" />
</div>

问题在于，当我使用transclude时，ng-model转到根元素，结果DOM是

<div class="form-element" ng-model="myname">
    <input>
</div>

是否可以选择将ng-model属性转移到哪个内部元素？

如果我创建另一个名为my-model的指令并使用它而不是ng-model，我该如何将它传递给内部输入元素？

<my-input my-model="myname">

应该成为

<div class="form-element">
    <input ng-model="myname" />
</div>

Answer 1

我认为没有必要在这里使用ng-transclude，你可以简单地使用指令

<my-input model="myname">

和指令模板

<div class="form-element">
    <input ng-model="model" />
</div>

其中指令范围是

scope: {
    'model': '='
}

通过使用它，你可以在指令中使用几个模型，你可以将它们放在任何你想要的地方。

Answer 2

是。不久前我遇到了这个问题。 您需要将ng-model绑定为对象的属性，例如。

<div class="form-element">
<input ng-model="user.myname" />
</div>

在控制器中，请确保执行此操作。

$scope.user = {};

通过这种方式，angular可以找到ng-model。