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。

Answer 2

当您使用ngIf时，它会创建一个子范围，因此在您的textarea的ngModel和您的输入中，您需要像这样引用父范围：

ng-model="$parent.localModel"

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

2 个答案: