AngularJS 在帖子中忽略禁用答案

【问题标题】：AngularJS ignores disabled on postAngularJS 在帖子中忽略禁用
【发布时间】：2016-05-20 01:05:48
【问题描述】：

我创建了一个指令来设置禁用输入框，这些框没有双击为“活动”。我有一个问题，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>
                ...

全部命名为 f1、f2、f3..

指令：

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"…}

【问题讨论】：

Scope.abc 模型将始终包含一些值。通过禁用，您不会删除 2 路绑定。
你是说我需要禁用 data-ng-model 属性来禁用值传递？我相信我可以做到这一点，它实际上解决了我的其他问题。我只是不知道如果我输入一些东西会不会影响输入含义，然后删除属性，然后再放回去，值会消失吗？
当你创建一个模型，并向它添加任何值时，它会存储它直到它被更改，如果通过任何方式在视图或控制器中，无论何时你将它更改为任何值，模型将被更新。你无法阻止这种情况发生。
那么您对这个特定问题的解决方案是什么？我需要将这些输入绑定到 ng-model 因为我需要我的 ng-click="function()" 将这些字段传递给函数，因为我在一个表单中有多个提交按钮。每个都有自己的参数。

标签： javascript angularjs

【解决方案1】：

我强烈建议在标签上使用 ng-disabled，而不是您所使用的难以阅读的 jQuery 样式表达式：

NG Disabled

所以属性已经在输入框上，只是由代码切换，属性=逻辑表达式

这是真正的角度工作，将为您完成所有禁用操作。修复我想象的属性会导致更多的代码和潜在的问题。

Plunkr 示例，取自我的评论：

Plunkr example

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>

还有两个控件：

Disable <input type="checkbox" ng-model="disabled" name="diablethem" id="disablethem"/>

Hide <input type="checkbox" ng-model="hideem" name="hideem" id="hideem"/>

根据需要初始化您的项目：

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

【讨论】：

@Rcls 不，你没有。添加属性与使用指令不同。 .attr('data-ng-disabled', 'isDisabled') 毫无意义。
请举例说明这将如何工作。我不太明白你的意思，但我为所有 HTML 元素添加了一个 data-ng-disabled 属性，然后我将其翻转为 isEnabled \ isDisabled from 指令。没有效果。
您可以在这里看到一个非常简单的启动：plnkr.co/edit/pzM8D7 如果您选中禁用，您的表单字段不会发布。如您所见，它的代码远少于缩放 DOM 字段。试一试。

【解决方案2】：

你必须在通过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) { … }

【讨论】：

为什么在Angular中混合jQuery，当你可以通过指令在Angular中使用编译功能时？？？
因为关于这个主题的文档非常稀缺，这是我第一次阅读有关 $compile 的内容。我发现 Angular 方式比 jQuery 复杂很多，即使人们声称它更好。
我向@Rwam 提出了这个问题！ ;-/

【解决方案3】：

我想出了一个解决方案来解决这个特殊问题。问题似乎与上述 cmets 中所建议的 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();
      });
    }
  };
});

【讨论】：