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....
This question is related to
javascript
angularjs
angularjs-directive
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.
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.
Source: Stackoverflow.com