angularjs - Attach additional functionality to parent controller in Angular -


i have dropdown element directive display in essence styled dropdown list additional capabilities.

my dropdown controller has function called opendropdownitems get's executed when list should displayed.

then have attribute directive called setinviewwhen provides expression when element should scrolled view when condition true.

<x set-in-view-when="something.item === selecteditem"> 

this example of x element attribute directive applied.

the thing dropdown list items (lis namely) have directive on them when user navigates on them using keyboard, automatically scroll them in view when passed visible viewport. whether these items displayed within scrollable container or whole in list longer browser viewport isn't relevant.

the main idea scrolling follow dropdown list selection. whether should scroll main window.

the problem

i can make setinviewwhen directive independent means have search closest scrollable container whenever condition changes on item. seems quite bit of processing avoid repeat (i need traverse dom upwards, checking each node's calculated stylesheet property overflowy + additional checks.

this seems redundant because whenever closest scrolling ancestor sibling elements same directive reuse calculation result.

question 1

how can share knowledge between sibling directives? if fire event not know whether receivers siblings or not without additional processing.

question 2

instead of checking scrollable container every time when directive's condition becomes true theoretically change dropdown parent's opendropdownitems first complete it's original execution execute scrollability check , use result of along directive's condition. can gain access dropdown's controller in directive via directive requires property , adjust in post-link phase.

but means couldn't use directive outside of dropdown usable directive attach on several elements in app scroll elements view under conditions.

what suggest how this?

to sum comments:

  • for question 1, there no direct way sibling directives communicate each other. create wrapper parent directive relay messages.
  • as per comments, condition something.item === selecteditem introduces watch; list of select items can many watches , detrimental performance. if doesn't occur now, trap , may lured using long list of items in future. rather have single watch in parent of <li>s , add "scroll view" logic there.
  • with previous point in mind, still have standalone setinviewwhen directive (seems useful) , have controller of x-select replacement directive share code it. e.g.:
    • a service containing common functionality,
    • an angular value containing base class (typescript or js) , have controller of both setinviewwhen , x directives extend it
    • or other solution convenient case
  • related question 2: children require parent , change method in (this technique endorsed angular, see ng-model , custom controls override ngmodel.$render() replacing it). if however, there many children changing method of parent, lead mess.

Comments