指令通信 - 共享對內部HTML元素的引用

Question

我想找到一種方法在我的兩個兄弟指令之間進行乾淨的通信。我想在一個指令中實現textarea的「insertAtCaret」功能，以便從另一個指令中調用。

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

text-holder變成這樣的事情：

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

的text-inserter需要的東西插入到該textarea - 什麼是最乾淨的角度十歲上下的方式，以允許通信？我希望能夠在頁面上支持多個實例。我應該爲共享服務中的每個人創建一個唯一的ID嗎？它似乎有點不潔。

Answer 1

您可以：

• Wrappe您在外DOM元素指令。
• 在此元素上創建通信指令。
• 使用此指令的控制器作爲兩個指令之間通信的API。

• 使用要求從兩個指令，來設置文本。

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

指令：

directive('textComDirective', function(){ 
    return { 
     scope:{}, 
     controller: function($scope){ 
      // create functions that will be used to set/use the text inserter. 
     } 
    } 
    }); 

Answer 2

兩個指令之間的唯一鏈是一個應該被更新的變量，這也由兩個指令。文本插入指令是有點像選擇方法要執行到文本持有者

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

insert函數在控制器中設置，該控制器將變量傳遞給指令，這樣可以幫助我們輕鬆理解應該應用哪種邏輯，以及將在模塊變量自身發起的範圍內發生。 更多的好處是你可以情境改變某些特定實例的行爲。