Question

是否有一种干净的方法来访问在给予它的函数内附加ng-disabled属性的元素？

Html元素：

 <input class="needsDisabling" ng-disabled="isFieldDisabled()" type="text">

控制器中的isFieldDisabled函数：

如何在此功能中访问附加了ng-disabled道具的元素？

$scope.isFieldDisabled = function () {
        // How can I access the element where the ng-disabled prop is attached to in this function ? 

        // if (element has class "needsDisabling")
        // return true;
}

我正在寻找另一种方法，然后将元素作为参数传递在功能中。

JSFiddle

Answer 1

ngDisabled旨在与您的模型一起使用（＃2 ），并且不允许在控制器中手动操作DOM元素（这在angularjs中被认为是不好的做法）。但无论如何，您仍然可以手动创建custom directive并操纵disabled属性（＃1 ）：

＆＃13;

angular.module('myApp',[])
.directive('myDisabled', [function () {
        var myDisabled = {
            restrict: 'A',
            scope: false,
            link : function(scope, element, attrs, ngModelCtrl){
                scope.$watch(function() {
                    return scope.$eval(attrs.myDisabled).apply(scope, element);
                }, function(val) {
                    element.prop('disabled', val);
                });
            }
        }
        return myDisabled;
}])
.controller('MyCtrl', ['$scope', function MyCtrl($scope) {

    $scope.isFieldDisabled = function (element) {
      return angular.element(element).hasClass('disabled');
    }
    
    $scope.inputs = [{}, { disabled: true }, {}];
    
    $scope.isInputDisabled = function (input){
      return !!input.disabled;
    };
    
}]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.angularjs.org/1.6.4/angular.js" ></script>
<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <h2>#1</h2>
    <input class="needsDisabling disabled" my-disabled="isFieldDisabled" type="text"/>
    <input class="needsDisabling" my-disabled="isFieldDisabled" type="text"/>
    <input class="needsDisabling disabled" my-disabled="isFieldDisabled" type="text"/>
    <h2>#2</h2>
    <div>
      <input type="text" ng-repeat="input in inputs" ng-disabled="isInputDisabled(input)" ng-model="input.value"/>
    </div>
  </div>
</div>

＆＃13;

Answer 2

你不能将元素传递给angularjs中的控制器函数，但为什么不利用ng-class指令作为你的类和禁用的值相互依赖？

ng-class="{needsDisabling: isDisabled}" ng-disabled="isDisabled"

我想不出你不应该这样做的原因，因为;

如果课程不是动态的，那么就不需要ng-disabled。您可以使用disabled="disabled"，但我想这不是原因。
如果类IS的值动态切换到角度之外知识，那么解决方案的那部分是有问题的，应该被改变。

在angularjs本身处理这个问题的另一个原因是像这里指出的那样创建你自己的指令。

如何访问附加了ng-disabled的响应元素？

2 个答案: