指令之間溝通的最佳方式

從here複製。也許，我可以在這裏得到更正確的答案！指令之間溝通的最佳方式

指令之間似乎有很多方法進行通信。假設你有嵌套的指令，其中內部指令必須與外部通信（例如，它已被用戶選擇）。

<outer> 
    <inner></inner> 
    <inner></inner> 
</outer>

到目前爲止，我有這樣

的5種方法要求：家長指導

內部指令可能要求外部指令，它可以暴露其控制器上的一些方法。所以在內部定義

require: '^outer', 
link: function(scope, iElement, iAttrs, outerController) { 
    // This can be passed to ng-click in the template 
    $scope.chosen = function() { 
    outerController.chosen(something); 
    } 
}

而在外部指令的控制器：

controller: function($scope) { 
    this.chosen = function(something) { 
    } 
}

$發出事件

內部指令可以$發出一個事件，其中外指令可以響應通過$ on。因此，在內部指令的控制器：

controller: function($scope) { 
    $scope.chosen = function() { 
    $scope.$emit('inner::chosen', something); 
    } 
}

並且在外指令控制器：

controller: function($scope) { 
    $scope.$on('inner::chosen, function(e, data) { 
    } 
}

執行在父範圍表達，經由&

項可以結合到在表達父範圍，並在適當的位置執行它。 HTML代碼將是這樣的：

<outer> 
    <inner inner-choose="functionOnOuter(item)"></inner> 
    <inner inner-choose="functionOnOuter(item)"></inner> 
</outer>

所以內部控制有一個「innerChoose」功能，它可以調用

scope: { 
    'innerChoose': '&' 
}, 
controller: function() { 
    $scope.click = function() { 
    $scope.innerChoose({item:something}); 
    } 
}

這將調用（在這種情況下）在外部指令的的「functionOnOuter」功能範圍：在非隔離範圍

controller: function($scope) { 
    $scope.functionOnOuter = function(item) { 
    } 
}

範圍繼承

鑑於這些是嵌套控制器，範圍繼承可以在工作，並且內部指令可以只調用範圍鏈中的任何函數，只要它沒有隔離範圍即可）。所以在內部指令：

// scope: anything but a hash {} 
controller: function() { 
    $scope.click = function() { 
    $scope.functionOnOuter(something); 
    } 
}

而在外部指令：

controller: function($scope) { 
    $scope.functionOnOuter = function(item) { 
    } 
}

通過服務注入到內外

服務可以被注入到兩個指令，這樣他們就可以可以直接訪問同一個對象，或者調用函數來通知服務，甚至可以在pub/sub系統中註冊自己以通知。這不需要指令被嵌套。

問：每個人的潛在缺點和優點是什麼？

來源

2016-05-31 UsmanZ

首先，我想指出的是您的例子

 
<outer> 
    <inner inner-choose="functionOnOuter(item)"></inner> 
    <inner inner-choose="functionOnOuter(item)"></inner> 
</outer>

不會與

 
scope: { 
    'innerChoose': '&' 
}, 
controller: function() { 
    $scope.click = function() { 
    $scope.innerChoose({item:something}); 
    } 
}

工作您可能需要運行帶有$整個innerChoose表達分析，或者您需要只傳遞一個函數的參考，如：

 
<outer> 
    <inner inner-choose="functionOnOuter"></inner> 
    <inner inner-choose="functionOnOuter"></inner> 
</outer>

除此之外，它歸結爲wha t根據團隊的文體偏好以及您需要完成的具體內容具有最佳意義。例如，如果您需要能夠執行基於JSON中的數據設置的命令，這些命令基於可以以不同方式放在一起的多個圖層預先未知，則可能需要使用事件，因爲任何耦合完全可能會阻止您在正確的數據上創建或執行正確的命令。

如果您需要完成的主要任務是構建使用該功能的視圖，則可能需要使用共享的$範圍來儘可能簡化視圖。

我主要是使用ngModel的require，它比parent指令更像是一個兄弟指令。我還沒有需要引用整個父控制器的用例。

來源

2016-05-31 15:49:54

當我們有這樣的層次結構時，我會選擇第一個選項。 require被創建來緊密地耦合兩個指令或組件（來自Angular 1.5）。你可以用這個來指出，如果沒有outer，你就不能使用inner。

我不喜歡事件，因爲當我們使用錯誤時他們可以通過很多範圍。

&和範圍設置有一些優點，但它取決於你想要的。這些不適用於所有情況。

我認爲現在在這樣的討論中我們應該考慮到Angular 2。如果你想從子組件執行一個函數，你需要通過@ViewChild註解來傳遞這個組件。我認爲Angular 1.x中最接近的解決方案是使用require，這正如我剛剛提到的那樣，也是爲Angular 1.x組件實現的。

來源

2016-05-31 15:53:06 mat3e

指令之間溝通的最佳方式

回答

相關問題