4

我试图用一个指令包装一个按钮，该指令将根据外部服务的响应禁用它。但是，我需要保留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导致这种情况的确切原因吗？

4

0 回答 0