Angularjs 在同级指令之间共享作用域变量

我正在处理一个可以通过单击标题栏展开/折叠的表。为了实现这一点，我有两个在标记中显示为同级的指令：slideToggle和slideable。我想在两个指令之间共享一个包含打开/关闭状态的变量。我创建了一个父指令slideContainer作为API，因为据我所知，同级指令不能单独共享控制器实例。我希望通过向slideContainer元素添加属性，可以在标记中设置状态。变量应该可以从所有三个指令中访问、保持最新和可变，并且DOM应该可以访问双向绑定，因为视图的一部分将取决于状态。起初，我想我会在这里发布文章，以了解实现这一目标的“最佳”方法，但我已经尝试了许多方法，但都无法完全实现。这就是我现在的处境：

可滑动。咖啡：

directives.directive "slideContainer", () ->
  link: (scope, element, attrs) ->
    scope.closed = "closed" in attrs
  controller: ($scope) ->
    this.closed = $scope.closed

directives.directive "slideToggle", () ->
  scope: {}
  require: "^slideContainer"
  link: (scope, element, attrs, slideContainerCtrl) ->
    scope.closed = slideContainerCtrl.closed

    target = null
    content = null

    element.bind "click", () ->
      target = document.querySelector(attrs.slideToggle) if (!target)
      content = target.querySelector(".slideable_content") if (!content)

      if slideContainerCtrl.closed
        target.style.maxHeight = content.clientHeight + "px"
      else
        target.style.maxHeight = "0px"

      slideContainerCtrl.closed = !slideContainerCtrl.closed

directives.directive "slideable", () ->
  scope: {}
  restrict: "C"
  require: "^slideContainer"
  compile: (element, attr) ->
    contents = element.html()
    element.html("<div class='slideable_content'>#{contents}</div>")

    (scope, element, attrs, slideContainerCtrl) ->
      transProp = attrs.transProp || "max-height"
      transTimeFunc = attrs.transTimeFun || "linear"
      transDur = attrs.transDur || "0.5s"
      maxHeight = if slideContainerCtrl.closed "0" else "1000px"

      element.css({
          "overflow": "hidden",
          "max-height": maxHeight,
          "transition": "#{transProp} #{transTimeFunc} #{transDur}",
          "width": "100%"
      })

---

您尝试过使用服务吗？我认为服务不起作用，因为它是一个单实例，多个表需要独立使用此设置。我必须为每个表创建一个服务，这似乎不是一个好方法。如果我正确理解您的问题。您希望将这三个指令作为一个集合，稍后您将拥有这三个指令的多个独立集合。如果是这样，您可以在每个指令中保留一个变量。并使用$broadcast、$emit和$on更新每个指令中的变量。可能不是最好的方法，但应该能够解决您的问题。这有意义吗？或者你可以把三个指令合并成一个。

<div slideContainer closed>
  <!-- initial state determined by presence of closed attr above -->
  <div slideToggle>
    <img ng-if="closed" src="closed.jpg">
    <img ng-if="!closed" src="open.jpg">
    <!-- TABLE TITLE -->
  </div>
  <table class="=open-ended-in-process-table slideable">
    <thead>
      <tr>
        <!-- COLUMN TITLES -->
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="thing in list">
        <!-- TABLE DATA -->
      </tr>
    </tbody>
  </table>
</div>