makedo without find() with angular

Issue

I need to use an equivalent to find(".class") in angularjs

I've found that I should use this:

//find('.classname'), assumes you already have the starting elem to search from
angular.element(elem.querySelector('.classname'))

So I'm trying in my directive but can't make it work:

UserManager.directive('selectWhenEditing',function(){
    var linkFunction = function(scope,startingelem,attributes)
    {

        console.log(angular.element(startingelem.querySelector('.classname')));

    };
    return{
        restrict: 'AEC',
        link:linkFunction
    };}
);

but that doesn't work it gives me

Error: startingelem.querySelector is not a function

what do I do wrong ?

Solution

element does have querySelector, the element that is passed to the link function, startingelem in your case, is wrapped in jqLite. Because of this, you don't have access to all of the attributes and functions attached to it. You need to access the actual element/node to get access querySelector. You can do with with startingelem[0]

UserManager.directive('selectWhenEditing',function(){
    var linkFunction = function(scope,startingelem,attributes)
    {

        console.log(angular.element(startingelem[0].querySelector('.classname')));

    };
    return{
        restrict: 'AEC',
        link:linkFunction
    };}
);

Note the difference between element.querySelector(...) and document.querySelector(...) is the difference between $('.myElement').find(...) and $(document).find(...) where one looks in an particular element's children and the other looks at all of the element in the document.

Also to make it more similar to jQuery's find, you should use querySelectorAll(...) to find all of the elements that match. querySelector(...) would be more similar to .find(...).first()

Answered By - TheSharpieOne