Question

我正在尝试创建一个名为toggle-field的指令，该指令支持切换表单中输入/按钮字段的禁用/启用状态。 The plnker is here。到目前为止，我的指令工作方式可以禁用没有ng-disabled指令的输入和按钮。问题出在已经禁用ng的按钮上，例如：

<button type="submit" toggle-field class="btn btn-primary" ng-disabled="test_form.$invalid" ng-click="vm.submit()">Submit</button>

指令中的链接功能如下：

function toggleField($log, $compile) {

    var directive = {
      link: link,
      require: '?ngModel',
      restrict: 'A',
      replace: true
    };

    var originalNgDisabledVal = '';

    return directive;

function link(scope, element, attrs, ngModelCtrl) {
      //enabled

      if (attrs.hasOwnProperty('ngDisabled')) {
        originalNgDisabledVal = attrs.ngDisabled;
        $log.info('attrs.ngDisabled value: ' + scope.$eval(attrs.ngDisabled));
      }

      scope.$on('enabled', function() {
        if (attrs.hasOwnProperty('ngDisabled')) {
          element.show();
          //attrs.$set('ngDisabled', originalNgDisabledVal); //not working
        } else {
          element.removeAttr('disabled');
        }

      });

      //disabled
      scope.$on('disabled', function() {
        if (!attrs.hasOwnProperty('ngDisabled')) {
          attrs.$set('disabled', 'disabled');

        } else {
          //attrs.$set('ngDisabled', true); //not working
          element.hide();
        }
      });
      $compile(element.contents())(scope);
    } //link
}

作为上述代码中的解决方法，我在已经 ng-disabled 的字段上使用了element.show（）或element.hide（），但我真的想让它工作为残疾人士。任何帮助将不胜感激。

Answer 1

你在链接功能中做得过头了。你的链接功能实际上应该是空的（在这种情况下完全是空的）。这是解决方案的傻瓜：

http://plnkr.co/edit/KVeprA9qbqlkwvg9Bafx?p=preview

链接功能完全为空：

function link(scope, element, attrs, ngModelCtrl) {
  //enabled

  //$log.info('outherHTML: ' + element[0].outerHTML);

} //link

然后在html中你可以启用或不启用：

<input type="text" id="username" ng-disabled="!vm.enabled" toggle-field="" class="form-control col-sm-9" ng-model="vm.username" required="" />
<input type="password" id="password" ng-disabled="!vm.enabled" toggle-field="" class="form-control col-sm-9" ng-model="vm.password" />
<button type="submit" toggle-field="" class="btn btn-primary" ng-disabled="!vm.enabled || test_form.$invalid" ng-click="vm.submit()">Submit</button>

我甚至不认为你需要一个指令来处理这个问题，你可以在dom中完成。

Angular：指令切换禁用状态意外覆盖ng-disabled

1 个答案: