I'm trying to get elements from the Dom only disabled "disabled =" disabled "", then apply a value using angularjs, for this I'm using "getElementsByTagName", what happens is that I do not know how to select only those with the attribute disabled. I'm trying to apply it in a custom directive:

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';
    }
  }
};

Thank you!

I'm trying to get elements from the Dom only disabled "disabled =" disabled "", then apply a value using angularjs, for this I'm using "getElementsByTagName", what happens is that I do not know how to select only those with the attribute disabled. I'm trying to apply it in a custom directive:

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';
    }
  }
};

Thank you!

• javascript
• angularjs
• angularjs-directive

• Other buttons not the current one? Or only the current one? Also do they all reside within one controller instance? – charlietfl Commented Apr 3, 2019 at 16:47

2 Answers 2

I would remend using querySelector rather than getElementsByTag which allows you to write CSS style selectors for example.

If you just want to get all the disabled deb-buttons you can do so like so

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

But if you want to get all the elements that have the disabled attribute value set to disabled

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

But if you want to use getElementsByTagName you could loop over the result of getElementsByTagName and filter the deb-buttons that don't have the disabled attribute

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]) }
}

Well, as you are using directive i will prefer to use the selector this way:

function link(scope, element, attr) {
angular.element(element.querySelectorAll('deb-button:disabled') }

It's just another way of doing it.