2

私は非常に単純なディレクティブを書いています: 入力要素を div でラップする必要があります。これにはトランスクルージョンを使用します。問題は、何らかの理由で ng-model を壊すことです。完全なコードについては、このプランカーを参照してください: http://plnkr.co/edit/tYTsVUbleZV1iG6eMgjo

ng-model を期待どおりに動作させるにはどうすればよいですか?

指令コード

ディレクティブのコードは次のとおりです。

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

3 に答える 3

3

マークアップを次のように変更すると

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

そして、あなたも使うことができます

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

それはうまく動作します。理由は言えませんが、transclude: 'element' と replace: true の両方を使用したときにこの問題が発生したことがあります。後でソースに飛び込んで、何が起こっているのかを確認する必要があります。いずれにせよ、この回避策で得られるマークアップは同じになるはずです。

于 2013-10-16T19:27:49.663 に答える