AngularJS - 具有通用功能的部分

Question

我正在創建具有不同部分的AngularJS應用程序。在一個部分中，子部分具有完全相同的功能，但我不確定如何在不爲每個部分編寫相同的代碼的情況下完成此操作。

這裏是導航結構：

Campaign(section) 
    - notifications(sub-section) 
     - active 
     - inactive 
     - draft 
     - sent 
    - messages(sub-section) 
     - active 
     - paused 
     - draft 
     - scheduled 
    - conversation(sub-section) 
     - active 
     - paused 
     - draft 
     - scheduled 

所有子部分具有相同的功能，例如表示被點擊一個「通知」按鈕，當活動消息。另一個例子是當一個「非活動」按鈕被點擊時，等等。

消息模板對於每個子節鏈接（例如活動，非活動）可能不同。我想知道如何在不編寫多個控制器和視圖的情況下實現這一點。

Answer 1

對我來說，這並不完全清楚你想要達到什麼目標，但聽起來你需要寫幾條指令。這是一個僞示例，說明如何使用傳遞給子指令的可訪問控制器編寫主指令。這反映了一系列控制器具有共同服務的相同關係。

僞代碼

directive('outerDirective', [ 
    function() { 
    return { 
     controllerAs: 'outerDirectiveVc', 
     controller: [/* injectables & your controller function */] 
    } 
    } 
]) 
.directive('innerDirective', [ 
    function() { 
    return { 
     require: '^outerDirective', 
     link: function($scope, elem, attrs, outerDirectiveVc) { 
     outerDirectiveVc.someFunc() 
     } 
    } 
    } 
]) 

有關使用該指令的方法的好處是，你可以將它們用於通過模板的用戶界面僅僅是可重複使用的部分（如適用）。

的內部指令的require: '^outerDirective'會），確保您在DOM層次上面聲明某處的外部指令和b）允許您通過outerDirectiveVc參數訪問控制器在其鏈接功能。

不知道更多關於你的用例我不能真正地定製這個答案給你的具體UX，但我希望這可以讓你開始思考指令。