javascript - 动态修改文本字段。 Angular.js

Question

我有一个指令，在其中单击一个字段，然后我可以对其进行编辑。对于这个指令，我可以添加一个名为“typeinput”的属性。如果 typeinput = "textarea"那么我希望动态字段是 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 .