javascript - ng-model 在嵌入的输入中中断

Question

我正在编写一个非常简单的指令:它应该将一个输入元素包装在一个 div 中。我为此使用了嵌入。问题是它出于某种原因破坏了 ng-model。请参阅此 plunker 以获取完整代码:http://plnkr.co/edit/tYTsVUbleZV1iG6eMgjo

我该怎么做才能使 ng-model 的行为符合预期？

指令代码

指令代码如下:

testapp.directive('wrapInput', [function () {
   return {
      replace: true,
      transclude: 'element',
      template: '<div class="input-wrapper" ng-transclude></div>'
   };
}]);

Answer 1

如果您将标记更改为如下所示

<div  wrap-input>
  <input type="text" ng-model="anObject.anotherValue"/>
</div>

然后你也可以使用

transclude: true // instead of transclude: 'element'

它工作得很好。我不能说为什么，但我以前在同时使用 transclude: 'element' 和 replace: true 时见过这个问题。稍后我将不得不深入研究源代码以了解发生了什么。毫无疑问，使用此解决方法生成的标记应该是相同的。