Limit scope of angular element to directive

Question

I have a directive and in this directive I want to manipulate some elements on scroll. At the moment i'm using:

 angular.element( document.getElementsByClassName('splash-content') );

Which is fine, though it doesn't seem very efficient.

What I'd really like to do is limit the selector to the scope (child elements) of the element the directive is called on. In jQuery I'd use element.find('.splash-content') or element.children('.splash-content') but in angularjs it seems you can't add selectors to either of these method.

So, how's this best (and most efficiently) done "the angular" way?

Thanks!

Answer 1

I have created a simple fiddle showing how you can do this sort of thing without including the jQuery monster: http://jsfiddle.net/ADukg/4769/

For example, put this in your directive:

var childFind = function(children, className, results) {
    for(var i=0; i<children.length; i++){        
        var child = angular.element(children[i]);
        if(child.hasClass(className)){
            results.push(child);
        }                    
        childFind(child.children(), className, results);        
    }
}            

childFind(children, 'one', results);

Obviously this sort of thing is no where near as extensive, or complete as the methods jQuery offers, however if you only need some small one off functionality, I would opt for adding a simple helper function here and there without needing jQuery.