Question

我创建了一个指令，用于设置禁用的框，这些框不会被双击作为＆＃34;活动＆＃34;。我有一个问题，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 =＆＃34;＆＃39; isDisabled＆＃39;我已设置$scope.isDisabled = true;。但是，这些值仍然在$ scope函数上传递。为什么呢？

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

Answer 1

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

NG Disabled

因此该属性已经在输入框中，并且只是由代码切换， attribute = logic expression

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

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;

Answer 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) { … }

Answer 3

我想出了解决这个问题的解决方案。问题似乎与上面评论中建议的ng-model一致，并且它创建了一个难以实际删除的绑定，我需要绑定到实际使用ng-click="function(fields)"。

所以我去创建了一个指令，然后操作范围以添加另一个替换的＆＃39;我正在使用的对象树的参数。然后我检查是否存在并使用这些新值，但是还有另一个问题。

我不得不使用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();
      });
    }
  };
});

AngularJS在帖子上忽略禁用

3 个答案: