Javascript AngularJS忽略已禁用的post

我创建了一个指令，将未双击为“活动”的框上的输入设置为禁用。我有一个问题，AngularJS仍然将那些被禁用的输入传递给范围函数

基本输入HTML:

 <div class="selectable-boxes" toggle-inputs>
        <div class="box selected">
            <div class="form-container">
                <div class="form-group">
                    <input type="text" placeholder="First" name="f1" data-ng-model="fields.information.f1">
                </div>
                ...

app.directive( 'toggleInputs', function() {
    return {
        link: function(Scope, element, attrs) {
            var $element = element;

            $element.find('.box').bind('dblclick', function () {
                $element.find('.box').removeClass('selected');
                $(this).addClass('selected');
                toggleInputDisabled();
            });

            function toggleInputDisabled() {
                $element.find('.box').each(function () {
                    $(this).find(':input').attr('disabled', !$(this).hasClass('selected')).attr('data-ng-disabled', 'isDisabled');
                });
            }

            toggleInputDisabled();
        }
    };
});

指令运行良好。它禁用字段并添加ng disabled=“'isDisabled'，并且我已经设置了

$scope.isDisabled=true；

。但是，这些值仍然在$scope函数上向前传递。为什么

Object {f1: "1", f2: "2", f3: "3", f10: "4", f11: "5"…}

---

通过jQuery设置或更改属性后，必须重新编译元素：

function toggleInputDisabled() {
    $element.find('.box').each(function () {
        $(this).find(':input')
            .attr('disabled', !$(this).hasClass('selected'))
            .attr('data-ng-disabled', 'isDisabled');
        });
    }
    $compile($element)(scope);
}

不要忘记依赖关系：

app.directive( 'toggleInputs', function($compile) { … }

---

我强烈建议在标记上使用ng disabled，而不是您所追求的难以理解的jQuery样式表达式：

所以属性已经在输入框中，只是通过代码进行切换， 属性=逻辑表达式

这在工作中是正确的，并将为您执行所有禁用操作。我认为修复属性后将导致更多代码和潜在的更多问题

Plunkr示例，摘自我的评论：

HTML部分：

   <div class="form-group">
        <input type="text" placeholder="First" name="f1" 
        data-ng-model="fields.information.f1" ng-show="!hideem" ng-disabled="disabled">
   </div>

---

我想出了一个解决这个特殊问题的办法。问题似乎出在上面评论中提到的

ng model

，它创建了一个实际上很难删除的绑定，我需要这个绑定来实际使用

ng click=“function（fields）”

所以我去创建了一个指令，然后操纵作用域将另一个“替换”参数添加到我正在使用的对象树中。然后我检查它是否存在并使用这些新值，但这还有另一个问题

我必须使用setTimeout（function（）{}，100）；在控制器函数中实际查找这些新值，因为在其他情况下无法找到它们

app.directive( 'buttonClick', function() {
  return {
    link: function(scope, element, attrs) {
      element.bind('click', function() {
          scope.fields.information.replaced = {};

          var i = 0;

          $('.selectable-boxes .box.selected input').each(function() {
                scope.fields.information.replaced['f' + i] = $(this).val();
                i++;
          });

          scope.$apply();
      });
    }
  };
});

---

Scope.abc模型将始终包含一些值。禁用它并不是删除双向绑定。您是说我需要禁用data ng model属性以禁用值向前传递？我相信我可以做到这一点，它实际上解决了我的另一个问题。我只是不知道如果我键入一些内容，它是否会影响输入当你创建一个模型，并向它添加任何值时，它会一直存储到它被更改，如果通过任何方式在视图或控制器中，无论何时你将它更改为任何值，模型都会被更新。你不能阻止这种情况的发生。那么你对此问题的解决方案是什么问题？我需要将这些输入绑定到ng模型，因为我需要我的ng click=“function（）“将这些字段传递给函数，因为我在一个表单中有多个提交按钮。每个都有自己的参数。当您可以使用Angular by指令中的编译函数时，为什么要在Angular中混合jQuery呢？？？因为关于这个主题的文档非常稀少，这是我第一次读到$compile。我发现角度方法比jQuery复杂很多，即使人们声称它更好-/@不，你没有。添加属性与使用指令不同

.attr（'data-ng-disabled'、'isDisabled'）

是毫无意义的。请提供一个如何工作的示例。我不太明白您的意思，但我为所有HTML元素添加了一个禁用数据ng的属性，然后将其转换为isEnabled\isDisabled from指令。没有效果。您可以在这里看到一个非常简单的启动：如果您选中disabled，您的表单字段将不会发布。正如您所看到的，与缩放DOM字段相比，它的代码要少得多。试试看。

  $scope.disabled=false;
  $scope.hideem= false;

app.directive( 'buttonClick', function() {
  return {
    link: function(scope, element, attrs) {
      element.bind('click', function() {
          scope.fields.information.replaced = {};

          var i = 0;

          $('.selectable-boxes .box.selected input').each(function() {
                scope.fields.information.replaced['f' + i] = $(this).val();
                i++;
          });

          scope.$apply();
      });
    }
  };
});