DOM Manipulation Adding an Element in AngularJS

Question

tldr;

How would I add an element to an HTML tag using AngularJS?

without element:

<a class=“btn btn-primary” href=“blah.com” adding-element>Foo Bar</a>

with element:

<a ng-disabled="!isChecked" class=“btn btn-primary” href=“blah.com” adding-element>Foo Bar</a>

I am trying to perform DOM manipulation and add the ng-disabled element to my HTML tag on initial page load. I have attempted to do it in the code below based on this example but I am wondering if there is a better/easier way? I would also like it to be removed after page load is completed.

If someone could please explain it or provide a good tutorial/reference on how to accomplish this (preferably with plain vanilla Javascript), I would welcome it. Thanks.

HTML (before DOM Manipulation)

<a class=“btn btn-primary” href=“blah.com” adding-element>Foo Bar</a>

HTML (after DOM Manipulation)

<a ng-disabled="!isChecked" class=“btn btn-primary” href=“blah.com” adding-element>Foo Bar</a>

DIRECTIVE

.directive('AddingElement', function() {
restrict: 'A',
//scope: {
//        ng-disabled: "="
//    },
link: function (scope, el, attrs) {
el = angular.element(‘<a ng-disabled=“!isChecked” class=“btn btn-primary” href=“blah.com” adding-element>’)
element.replaceWith(el);
$compile(el)($scope);
});

I'm looking into using: tutorialspoint.com/jquery/jquery-dom.htm which suggests using selector.replaceWith( content ). After I test it out, I'll update my question accordingly. — fragilewindows
– fragilewindows, Commented Aug 9, 2016 at 1:42

JustH · Accepted Answer · 2016-08-09 02:43:32Z

1

For jQuery style DOM manipulation use angular.element

to add the attribute you can use element.attr('ng-disabled', '!isChecked') and if you need to remove it element.removeAttr('ng-disabled')

.directive('AddingElement', function() {
restrict: 'A',
 //scope: {
 //        ng-disabled: "="
 //    },
link: function (scope, element, attrs) {
  element.attr('ng-disabled', '!isChecked')
  $compile(el)($scope);
});

edited Aug 9, 2016 at 2:43

answered Aug 9, 2016 at 2:30

JustH

1,4029 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

DOM Manipulation Adding an Element in AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related