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

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

<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嗎？它似乎有點不潔。

來源

2015-09-30 Madd0g

您可以：

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. 
     } 
    } 
    });

來源

2015-09-30 22:17:47

包裝它們似乎不是很好的重用性，因爲我不得不記得在我使用它們的任何地方包裝它們，我更喜歡更接近的解決方案，我可以在這些元素上定義自己的東西。所以我知道如何使用共享服務 - 但我如何在同一頁面上支持多個？我怎麼會說這個「文本持有者」與那個「文本插入器」交談？ – Madd0g

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

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

來源

2015-10-01 01:49:49

沒錯，但我不想簡單地更新模型，我想插入特定位置的textarea（插入插入符），模型沒有對該textarea的引用。我怎樣才能得到一個很好的參考？ – Madd0g

@ Madd0g我不明白'插入插入符號'的意思。我的觀點是更新模型，它也更新文本區域。您能否告訴我一個樣本，以澄清當您獲得「不錯的參考」時，您將如何處理textarea？ –

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

回答

相關問題