Question

我有一个有很多表格的应用程序。每个字段都有几个HTML元素，所以我想我可以提取一些指令（每种类型的字段一个）以保持我的表单整洁。

我已经创建了一个sample app来演示问题，但我的行为却不一致。在示例应用中，<link />元素替换<input />。在我的真实应用中，<input />只是完全从DOM中删除。我觉得这应该很容易;为什么不起作用？

Answer 1

要回答您提出的问题，那是因为您通过ng-transclude告诉了它。用原始元素替换标记的内容，我认为你不想要;您可能希望将原始内容转换为标签。

这可能就是你要找的东西：

<div class="form-group" >
  <label for="{{htmlId}}" ng-transclude></label>
  <input id="{{htmlId}}" class="form-control" type="text" ng-model="model" />
  <span ng-repeat="error in errors">{{error}}</span>
</div>

我已将移植转移到标签中。虽然这有效，但我还是建议实际传递label属性的风格，而不是为了拥有一致的API和更简单的代码而转换它。但它在功能上是等同的，所以不要让我欺负你。

另外，你的.js也有一些错误。首先，您希望在范围中使用=而不是&

scope: {
  model: '=',
  errors: '='
},

&用于传递方法，而=用于对象（这是简化）。由于您的model和errors是对象，因此您需要使用=。

最后，在你的例子中，你的html模板和你的指令的模板没有相同的名字...你的.js中有一个额外的's'，但这可能只是在plunker而不是你的真正的应用程序。

Angular指令插入错误的DOM节点

1 个答案: