伪代码

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

所有子部分都具有相同的功能，例如在＆＃34;通知＆＃34;时显示活动消息。单击按钮。另一个例子是＆＃34;不活跃＆＃34;单击按钮，依此类推。

每个子节链接的消息模板可能不同（如活动，非活动）。我想知道如何在不编写多个控制器和视图的情况下实现这一目标。

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()
      }
    }
  }
])

使用指令方法的好处是，您可以通过模板（如果适用）将它们用于UI的可重用部分。

内部指令＆＃39> require: '^outerDirective'将a）确保在其上方的DOM层次结构中的某处声明了外部指令，并且b）允许您通过其链接功能中的outerDirectiveVc参数访问控制器。

在不了解您的用例的情况下，我无法为您的特定用户体验量找到这个答案，但我希望这可以让您开始考虑指令。

AngularJS - 具有共同功能的部分

1 个答案:

伪代码