Angularjs: how to find an element based on a data-attribute value?

Question

I've got the following directive:

template: '<div data-div="outer"><div data-div="inner"></div></div>',
link: function postLink(scope, elem, attrs) {
       var outer = elem.find('[data-div="outer"]');
       var inner = elem.find('[data-div="inner"]');
       outer.css({
           'background': 'red',
           'width': "100%",
           'height': "100%",
       });
       inner.css({
           'background': 'blue',
           'width': "50%",
           'height': "100%",
       });
    }

Based on this post, i tried these selectors. but im using jQLite, not JQuery.

so, how to find an element based on a data-attribute value?

http://plnkr.co/edit/FeJWvwnKjOZwAIABigtA?p=preview

Anthony Chu · Accepted Answer · 2014-09-08 05:01:20Z

5

You can use querySelector() (or querySelectorAll() for multiples) to get a similar find() behavior when using jqLite...

function postLink(scope, elem, attrs) {
    var outer = angular.element(elem[0].querySelector('[data-div="outer"]'));
    var inner = angular.element(elem[0].querySelector('[data-div="inner"]'));
    outer.css({
       'background': 'red',
       'width': "100%",
       'height': "100%",
    });
    inner.css({
       'background': 'blue',
       'width': "50%",
       'height': "100%",
    });
}

answered Sep 8, 2014 at 5:01

Anthony Chu

37.6k10 gold badges85 silver badges72 bronze badges

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

2 Comments

Anthony Chu Over a year ago

elem.find in plunker should be angular.element... querySelector() returns the raw DOM element and all that is needed is to turn it back into a jqLite object.

Anthony Chu Over a year ago

Just angular.element(elem[0].querySelector('[data-div="outer"]')) plnkr.co/edit/Xi5q1F4iTc0qbjWEVGrK?p=preview

Michael Kang · Accepted Answer · 2014-09-08 05:25:19Z

Demo Plunker

In angular, you rarely ever have to use jQuery selectors to find elements. Angular will walk the DOM tree and find the directives for you.

All you have to do is implement the directives:

app.directive('div', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attr) {
            if(attr.div == 'outer') {
               element.css({
                  'background': 'red',
                  'width': "100%",
                  'height': "100%",
                });
            }
            if(attr.div == 'inner') { 
               element.css({
                  'background': 'blue',
                  'width': "50%",
                  'height': "100%",
                });
            }
        }
    }
});

If you need further interactions with the parent directive, angular makes that easy to do too. You just have include a require attribute to your directive definition, and the parent controller will be injected as the 4th parameter to your child directive's link function:

app.directive ('parent', function() {
      return  {
         ...
         controller: function($scope, $element, $attrs) {
             function doSomething() {
             }
         } 
      }
});

app.directive('child, function() {
      return {
           restrict: 'A',
           require: '^parent',  // child directive requires a parent directive
           link: function(scope, element, attr, parentController) {
               // access to the parent controller
               parentController.doSomething();
           }
      }
});

Collectives™ on Stack Overflow

Angularjs: how to find an element based on a data-attribute value?

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related