Question

我试图从Dom中获取仅禁用的元素“ disabled =“ disabled”，然后使用angularjs应用值，为此，我使用的是“ getElementsByTagName”，发生的事情是我不知道如何仅选择那些禁用了属性的对象。我正在尝试在自定义指令中应用它：

HTML：

                <deb-button 
                base-path="assets\assets-angular" 
                textbtn="Primary" 
                colorbtn="primary"
                disabled="disabled">
                </deb-button>

JS

.directive('debButton', function () {
return {
  restrict: 'EA',
  templateUrl: function (element, attrs) {
    return attrs.basePath + "/templates/debbutton.html";
  },
  scope: {
    textbtn: '@',
    colorbtn: '@',
    isdisabled: '@'
  },
  controller: ['$scope', function ($scope) {
    var b = document.getElementsByTagName('deb-button');
    if (b) {
      console.log(b);
    }      
  }],
  link: function ($scope, colorbtn, isdisabled) {
    if (!$scope.colorbtn) {
      $scope.colorbtn = 'primary';
    }
  }
};

谢谢！

Answer 1

我建议您使用querySelector而不是getElementsByTag，这样可以编写CSS样式选择器。

如果您只想获取所有禁用的deb按钮，可以这样做

var b = document.querySelectorAll('deb-button:disabled')

但是，如果要获取将disabled属性值设置为disabled的所有元素

var b = document.querySelectorAll('deb-button[disabled="disabled"]');

但是，如果要使用getElementsByTagName，则可以遍历getElementsByTagName的结果，并过滤不具有禁用属性的deb按钮

ES6：

var b = document.getElementsByTagName('deb-button').filter( e => e.getAttribute('disabled') === 'disabled' )

ES5：

var a = document.getElementsByTagName('deb-button');
var b = [];
for (var i= 0; i < a.length; i++){
   if (a[i].getAttribute('disabled') === 'disabled') { b.push(a[i]) }
}

Answer 2

好吧，当您使用指令时，我会更喜欢以这种方式使用选择器：

功能链接（作用域，元素，属性）{
angular.element（element.querySelectorAll（'deb-button：disabled'） }

这是另一种方式。

仅在禁用了属性的情况下选择dom中的元素

2 个答案: