Angular JS manipulating dom by element from link function

Question

we know that we can access dom from directive by element because element is injected in link function.

see the approach

var app = angular.module("myApp", []);

app.directive('busyBox',function(){
     return  {
        restrict: 'A',
        link: function(scope, element, attrs) {
          element.on('click', function(){
            if(attrs.id=='btnadd')
            {

              var divElement = angular.element(document.body.querySelector('.parent')).append('<div class="child">Some text</div>');
        //     console.log(divElement);
             //  element.parent().find('.parent').append('<div>Some text</div>')
                //element.closest('.parent').append('<div class="child">child</div>')
              //angular.element(document).find('.parent').append('<div class="child">child</div>');
            }
            else if(attrs.id=='btnDel')
            {
            angular.element(document.body.querySelector('.child')).remove();
           //    m.removeChild(m.firstChild);
            }
          }); 

        }
        }
})

the above code is working but if i do not use angular.element() instead if i use element(document.body.querySelector('.parent')) the code is not working.

the element is injected in link function link: function(scope, element, attrs) when element is there in directive then why should i use angular.element() ?

please tell me how could i use element from directive to access dom instead of angular.element().

thanks

The element exposed to the postLink function is a jqLite class object which is a tiny, API-compatible subset of jQuery that allows AngularJS to manipulate the DOM in a cross-browser compatible way. jqLite implements only the most commonly needed functionality with the goal of having a very small footprint. The find() method is limited to lookups by tag name. For more information, see AngularJS angular.element API Reference. — georgeawg
– georgeawg, Commented Jun 3, 2017 at 16:57

Community · Accepted Answer · 2020-06-20 09:12:55Z

The element exposed to the postLink function is a jqLite class object which is a tiny, API-compatible subset of jQuery that allows AngularJS to manipulate the DOM in a cross-browser compatible way. jqLite implements only the most commonly needed functionality with the goal of having a very small footprint.

The find() method is limited to lookups by tag name. If you want the find() method to work with class selectors, load jQuery before the angular.js file.

If jQuery is available, angular.element is an alias for the jQuery function. If jQuery is not available, angular.element delegates to AngularJS's built-in subset of jQuery, called "jQuery lite" or jqLite.

To use jQuery, simply ensure it is loaded before the angular.js file. You can also use the ngJq directive to specify that jqlite should be used over jQuery, or to use a specific version of jQuery if multiple versions exist on the page.

— AngularJS angular.element API Reference

Can't we use element. closest function instead of find to get the div?

The jQuery closest function is not part of AngularJS jqLite. To use the closest function with the element value exposed to the directive postLink function, load the jQuery library before loading the AngularJS library.

For the list of jqLite functions, see AngularJS angular.element API Reference

Sunil D. · Accepted Answer · 2017-06-03 17:26:11Z

0

please tell me how could i use element from directive to access dom instead of angular.element()

If you want to use the element object that is passed into the link function of the directive to manipulate the DOM, you have to use various methods that the element object exposes, like find.

Do not use it like this:

element(document.body.querySelector('.parent'))

Instead you can do:

// works only if you are using jQuery
element.find('.parent');
// for JQLite, the find method is limited to lookup by tag name:
element.find('div');

Note that as mentioned in the answer from @georgeawg, that you might be using JQLite or JQuery ... where the JQLite functionality is not as full featured as JQuery.

answered Jun 3, 2017 at 17:26

Sunil D.

18.2k6 gold badges55 silver badges69 bronze badges

1 Comment

Monojit Sarkar Over a year ago

Can't we use element. Closest function instead of find to get the div?

Collectives™ on Stack Overflow

Angular JS manipulating dom by element from link function

see the approach

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

see the approach

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related