指令是否可以繼承AngularJs應用程序中另一條指令的行爲？

Question

我需要使用Angular創建一個類似於頁面的儀表板，並且只要我開始編寫主頁面上的窗口小部件，很明顯我會在它們之間重複代碼。

基本上，所有的小工具有一些「數據」，用於呈現數據和一個「加載」屬性（真而請求正在進行，以顯示其容器內的動畫圖標）的模板。

然而，模板本身在小部件中是不同的。由於模板不同，數據處理和（可能）操作也不同。

好吧，所以，這意味着每個小部件有不同的控制器。但我可以分享他們之間的基本行爲嗎？像執行請求一樣，將「loading」設置爲「true」，處理/操作響應，將加載設置爲false，現在的模板。

這種情況如何與Angular 1.x一起工作？

我很欣賞搞清楚我需要考慮爲工作主題的任何幫助。

感謝您的幫助。

Answer 1

我這樣做的方式是擁有一個基本控制器，它是包含所有基本功能的vm，然後會有一個子視圖，它是指令並且通常沒有隔離範圍，因此它可以看到vm並使用它的功能（但您也可以將它作爲指令定義的一部分傳入）。

如果你想象它沒有指令的第二，它可能是這個樣子：

 
<div ng-controller="parent as vm"> 
    &ltdiv ng-controller="child">...</div> 
</div> 

和控制器可能類似於：HTTP的

 
app.module('someModule').controller('parent', ['dataService', parent]) 
.controller('child', ['$scope', child]); 

function parent(dataService) { 
    var vm = this; 
    var dataCollection = dataService.collection; 
    vm.findTheData = function(value) { 
    return dataCollection.indexOf(value); 
    } 
} 

function child($scope) { 
    $scope.dataIndex = -1; 
    $scope.onButtonClicked = function(value) { 
     if ($scope.vm) $scope.dataIndex = vm.findTheData(value); 
    } 
}