0

I am writing a directive with AngularJS, the directive is restricted as a attribute, which seeks to manipulate some of the child elements of the element.

So far I'm selecting the elements I want to work with in this manner:

var subMenus = angular.element(element.children()[1]);

Which obviously is bad as I could very easily wind up getting other unexpected elements.

I've also tried selecting elements with a particular directive:

var subMenus = angular.element('[imp-drop-sub]');

This results in selecting the elements which I want plus other elements which have the directive but are not children of the element I want to work with.

Is there some selector which allows me to do both, select those with the particular directive (imp-drop-menu) but only from the children elements ?

Using jQuery is possible but the manipulation must be done from a angular directive.

Jason Aller
  • 3,541
  • 28
  • 38
  • 38
George Bora
  • 1,618
  • 6
  • 26
  • 45
  • This is not how you use angularjs. please read this awesome text: http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background?rq=1 –  Apr 30 '14 at 19:35
  • I would argue that I am following that answer very closely, I wrote a directive (a drop down menu just like in the example) for the DOM manipulation and using the full answer from zhonk I cand do what I need with only the integrated jqlite. About the final warning to not even include Jquerry that's too dogmatic for my tastes. – George Bora Apr 30 '14 at 21:29
  • If I understand you right, you have a parent-child-relationship between the drop-down-menu and its submenues. Your parent (the drop down menu) has control over its children (the submenues) and must know them. That is a very invalid usecase for dommanipulation using jquery or jqlite. Wait, I'm writing a fiddle with a better way.. –  May 01 '14 at 10:20
  • You can use this fiddle as a startingpoint to get an idea of how you handle parent-child-relationships in angularjs: http://jsfiddle.net/dAD4H/1/ for a more complex example look at how ngForm and ngModel work together: https://github.com/angular/angular.js/blob/master/src/ng/directive/input.js –  May 01 '14 at 11:09

1 Answers1

1

Unfortunatly angulars jqlite (https://docs.angularjs.org/api/ng/function/angular.element) doesn't support children() with selectors. And also find is very limited.

jQuery can, so that would a solution: jQuery(element).children('[imp-drop-sub]');

The other method would be, to call children() first. Then iterate/foreach through the collection and check if the directive is there or not

Zhonk
  • 614
  • 4
  • 13
  • The second method seems better for my situation, could you please respond with how can I check if a element has a directive with angular ? – George Bora Apr 30 '14 at 09:35
  • Just a small change to your fiddle is needed (for me at least): subMenus.push(angular.element(item)); so that the contents of submenus are elements. – George Bora Apr 30 '14 at 12:30