指令通信-共享对内部HTML元素的引用

Question

I want to find a way to do clean communication between my two sibling directives. I want to implement "insertAtCaret" functionality for a textarea in one directive, to be called from another.

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

text-holder turns into something like this:

<div class='my-class'>
    <h3>Enter some text:</h3>
    <textarea ng-model='ngModel'></textarea>
</div>

The text-inserter needs to insert stuff into that textarea - what's the cleanest angular-ish way to allow that communication? I want to be able to support multiple instances of that on the page. Should I just create a unique id for each one from a shared service? It seems a little unclean.

Answer 1

You can :

• Wrappe your directive in outer DOM element.
• create a communication directive on this element.
• Use the controller of this directive as an API for communication between the two directives.

• Use require from the two directive, to, set, the 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 that will be used to set/use the text inserter.
       }   
    }
    });

Answer 2

The only chain between two directives is a variable that is supposed to be updated, this is also used by both directive. The text-inserter directive is sort of like choosing the method to be executed to the text-holder

html

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

script.js

var app = angular.module('testapp',[]);
app.controller('appController', function ($scope) {

  $scope.model = {text: 'sample', insert: function(a){$scope.model.text = a}};

})

app.directive('textInserter', function () {
      return {
      restrict: 'E',
      trasclude: true // important to keep the content that is defined outside of directive
    }
});  

Sample

The insert function is set in the controller that is holding the variable to pass to the directive, this way helps us to easy understand what logic should be applied and is going to happen for the model variable in the initiated scope it self. The more benefit is you can situational change the behavior for some specific instance.