0

我正在创建一个具有不同部分的 AngularJS 应用程序。在一个部分中，子部分具有完全相同的功能，但如果不为每个部分编写相同的代码，我不确定如何实现这一点。

这是导航结构：

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

所有子部分都具有相同的功能，例如在单击“通知”按钮时显示活动消息。另一个示例是单击“非活动”按钮时，等等。

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

4

1 回答 1

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 的可重用部分。

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

在不了解您的用例的情况下，我无法真正根据您的特定 UX 定制这个答案，但我希望这能让您开始考虑指令。

于 2016-06-08T19:38:48.647 回答