Find child element in AngularJS directive
Solution 1
jQlite (angular's "jQuery" port) doesn't support lookup by classes.
One solution would be to include jQuery in your app.
Another is using QuerySelector
or QuerySelectorAll
:
link: function(scope, element, attrs) {
console.log(element[0].querySelector('.list-scrollable'))
}
We use the first item in the element
array, which is the HTML element. element.eq(0)
would yield the same.
Solution 2
In your link function, do this:
// link function
function (scope, element, attrs) {
var myEl = angular.element(element[0].querySelector('.list-scrollable'));
}
Also, in your link function, don't name your scope
variable using a $
. That is an angular convention that is specific to built in angular services, and is not something that you want to use for your own variables.
![vtortola](https://i.stack.imgur.com/zSNAW.jpg?s=256&g=1)
vtortola
Updated on August 29, 2020Comments
-
vtortola almost 4 years
I am working in a directive and I am having problems using the parameter
element
to find its childs by class name..directive("ngScrollList", function(){ return { restrict: 'AE', link: function($scope, element, attrs, controller) { var scrollable = element.find('div.list-scrollable'); ... } }; })
I can find it by the tag name but it fails to find it by class name as I can see in the console:
element.find('div') [<div class="list-viewport">…</div>,<div class="list-scrollable">…</div>] element.find('div.list-scrollable') []
Which would be the right way of doing such thing? I know I can add jQuery, but I was wondering if wouldn't that be an overkill....