javascript - Directive communication - sharing a reference to an inner HTML element -

i want find way clean communication between 2 sibling directives. want implement "insertatcaret" functionality textarea in 1 directive, called another.

<text-holder ng-model='model.text' /> <text-inserter>     <a ng-click='insert("hello")'>hello</a> </text-inserter> 

text-holder turns this:

<div class='my-class'>     <h3>enter text:</h3>     <textarea ng-model='ngmodel'></textarea> </div> 

the text-inserter needs insert stuff textarea - what's cleanest angular-ish way allow communication? want able support multiple instances of on page. should create unique id each 1 shared service? seems little unclean.

you can :

• wrappe directive in outer dom element.
• create communication directive on element.
• use controller of directive api communication between 2 directives.

• use require 2 directive, to, set, text.

  <div text-com-directive> <text-holder ng-model='model.text' /> <text-inserter>     <a ng-click='insert("hello")'>hello</a> </text-inserter> </div> 

directive :

    directive('textcomdirective', function(){     return {        scope:{},        controller: function($scope){            // create functions used set/use text inserter.        }        }     });