AngularJS在发布时忽略禁用

AngularJS ignores disabled on post

本文关键字：布时忽 AngularJS      更新时间：2024-05-16

我创建了一个指令，将未双击为"活动"的框上的输入设置为禁用。我有一个问题，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"…}

我强烈建议在标签上使用禁用的ng，而不是你所追求的难以阅读的jQuery风格的表达式：

NG禁用

因此，属性已经在输入框上，并且只是由代码切换，attribute=逻辑表达式

这是真正的角度工作，并将为你做所有的禁用。我认为修复属性后会导致更多的代码和潜在的更多问题。

一个大胆的例子，取自我的评论：

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>

以及两个控件：

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;

通过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-model，正如上面的评论所建议的那样，它创建了一个很难真正删除的绑定，我需要该绑定才能真正使用ng-click="function(fields)"。

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

我不得不使用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();
      });
    }
  };
});
相关文章：