Question

我正在尝试用一个指令来包装一个按钮，该指令将根据外部服务的响应禁用它。但是，我需要保留按钮的原始ng-disabled值（如果有）。

我设法通过更改我在链接函数中收到的属性ngDirective来完成此操作，但是，这不会更改DOM中的元素，这会阻止我对其进行正确测试。

如果我尝试更改DOM元素（不更改属性），它根本不起作用。更改两者都不会解决测试问题，因为测试只能检查一件没有区别的事情。

这是一个有效的POC：

var app = angular.module('MyApp', []);

app.service('outer', function() {
  var disabled = false;
  
  this.isDisabled = function() { 
    return disabled;
  };
  
  this.toggleDisabled = function() {
    disabled = !disabled;
  };
});


app.controller('MyCtrl', function($scope, outer) {
  $scope.toggleOuter = function() {
    outer.toggleDisabled();
  };
  $scope.isDisabled = outer.isDisabled;
  $scope.inner = false;
});


app.directive('myButton', function() {
  return {
    restrict: 'E',
    transclude: true,
    replace: true,
    controller: function($scope, outer) {
      $scope.isDisabled = outer.isDisabled;
    },
    scope: {
    },
    template: '<button ng-transclude></button>',
    
    link: {
      post: function(s, e, a) {        
        var disabled = "isDisabled(" + a.actionName + ")";
      
        if (a.ngDisabled) {
          disabled += " || " + a.ngDisabled;
        }
        
        a.ngDisabled = disabled;
        //e.attr('ng-disabled', disabled);
      }
    }
  };
});

button[disabled] {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="MyApp" ng-controller="MyCtrl">
  <div><button ng-click="toggleOuter()">Toggle outer</button></div>
  <div><button ng-click="inner = !inner">Toggle inner</button></div>
  <div><my-button ng-disabled="inner" action-name="test-action">BUTTON</my-button></div>
</div>

如果我替换该行：a.ngDisabled = disabled;

使用：e.attr('ng-disabled', disabled);

DOM更改，我可以测试它，但它不起作用。

有人可以解释ng-disabled究竟发生了什么导致这种情况吗？

在自定义指令中更改ng-disabled

0 个答案: