テキストフィールドを動的に変更します。 Angular.js

Question

私はフィールドをクリックして編集することができる指示文を持っています。このディレクティブには、 "typeinput"というプロパティを追加できます。 typeinput = "textarea"の場合は、ダイナミックフィールドを入力テキストではなくテキストエリアにしたいと思います。私はng-ifの助けを借りてこの検証を行っています。

しかし、私はこれを行う場合、これは動作を停止し、新しいダイナミックなフィールド値は保存されません。どうすれば修正できますか？

<div ng-repeat="faq in faqs"> 
     <a href='' click-to-edit ng-model='faq.pregunta' typeinput='textarea' >{{faq.pregunta}}</a> 
</div> 

    .directive('clickToEdit', function($timeout,$compile) { 

     return { 
      require: 'ngModel', 
      scope: { 
       model: '=ngModel' 
      }, 
      replace: true, 
      transclude: false, 
      // includes our template 
      template: 
       '<div class="templateRoot">'+ 
        '<div class="hover-edit-trigger" title="click to edit">'+ 
         '<div class="hover-text-field" ng-show="!editState" ng-click="toggle()">{{model}}</div>'+ 
         //'<span ng-if="type==true">'+ 
         '<input class="inputText" type="text" ng-model="localModel" ng-enter="save()" ng-show="editState" />' + 
         //'</span>'+ 
         //'<span ng-if="type==false">'+ 
         //'<textarea class="inputText" ng-model="localModel" ng-enter="save()" ng-show="editState" />' + 
         //'</span>'+ 
         '<div class="edit-button-group pull-right" ng-show="editState">'+ 
          '<div class="glyphicon glyphicon-ok" ng-click="save()"></div>'+ 
          '<div class="glyphicon glyphicon-remove" ng-click="cancel()"></div>'+ 
         '</div>'+ 
        '</div>'+ 
       '</div>', 

https://jsfiddle.net/ybmrzo5w/

Answer 1

ここでの問題は、他のディレクティブのようなng-ifディレクティブは、子スコープを作成することです。

あなたはng-modelでオブジェクトのプロパティを使用することができます - そして、ng-ifは新しい子スコープを作成した場合でも、親スコープが変更になります： localModel.valueはあなたのケースで動作するはずです。

working jsfiddleを参照してください。

Answer 2

あなたは、このような親スコープに参照する必要があなたのtextareaとあなたの入力のngModelにおけるので、それは子スコープを作成ngIf使用する場合：

ng-model="$parent.localModel"