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，但我希望这可以让你开始思考指令。