AngularJS控制器与嵌套隔离作用域指令的通信

在我的AngularJS应用程序中，我必须创建一个手风琴，每个部分都包含一个滑块控件。我希望手风琴和滑块都向外部控制器公开API，例如：

accordion.collapseAll()
accordion.openNextPane()

或

我希望能够在控制器中执行类似的操作：

$scope.clickNext = function() {
    $scope.accordion.openNextPane();
};

$scope.clickResetAll = function() {
    $scope.items.forEach(function(item, ind) {
        $scope.slider[ind].resetValue();
        // or:
        $scope.accordion.pane[ind].slider.resetValue();
    });   
}

我正在考虑为accordion和slider创建隔离作用域指令，通过双向绑定允许它们将其方法公开给父控制器。页面模板将如下所示：

<div ng-controller="myController">
    <accordion data="accordion">
        <div ng-repeat="c in collection">
            <accordion-pane>
                <slider data="slider"></slider>
            </accordion-pane> 
        </div>
    </accordion>
</div>

但在这一点上，我迷失在一个迷宫中，孤立的作用域和有限的儿童可视性，似乎没有办法从外部控制器访问内部元素。我在Google周围搜索的许多解决方案似乎都是正常的，有指令与控制器对话，而不是相反，但这似乎破坏了封装。

---

你知道怎么做吗？对于这个问题，什么是正确的AngularJS模式？

是的，这不是很清楚。您可以做的是：使用共享服务并在那个里实现简单的观察者模式，然后订阅内部指令。然后您也可以使用本机事件系统，但这很难看，请避免。另一个选项是，您可以通过

require

config在外部控制器上注册内部指令控制器。还有一个选择是实际使用绑定，这里可以使用单向或双向绑定，但它们调用方法不太方便，尽管也有可能。我可能会选择服务。让我知道，如果有什么不清楚，我可能会张贴更多的扩展答案。谢谢。服务解决方案删除了指令和控制器之间的依赖关系，但代价是为它们创建另一个外部依赖关系，并且通过使用require，您仍然在控制器上创建指令的依赖关系，对吗？这正是我想要避免的。相反，您能更好地解释一下使用单向或双向绑定的含义吗？因为这正是我似乎无法做到的。您可以这样做，但我认为这不是一个好主意。很酷，我不知道Angular 1.5组件，从我读到的内容来看，它们似乎做了我想做的事情。不幸的是，我的解决方案是Angular 1.2，所以目前这不是一个选项。我已经做了一个快速的hacky指令，将指令的隔离范围暴露给父控制器，也许我可以把它添加到我的问题中。组件只是一个简化的指令，你也可以用普通指令做同样的事情。是的，这不是很清楚。您可以做的是：使用共享服务并在那个里实现简单的观察者模式，然后订阅内部指令。然后您也可以使用本机事件系统，但这很难看，请避免。另一个选项是，您可以通过

require

config在外部控制器上注册内部指令控制器。还有一个选择是实际使用绑定，这里可以使用单向或双向绑定，但它们调用方法不太方便，尽管也有可能。我可能会选择服务。让我知道，如果有什么不清楚，我可能会张贴更多的扩展答案。谢谢。服务解决方案删除了指令和控制器之间的依赖关系，但代价是为它们创建另一个外部依赖关系，并且通过使用require，您仍然在控制器上创建指令的依赖关系，对吗？这正是我想要避免的。相反，您能更好地解释一下使用单向或双向绑定的含义吗？因为这正是我似乎无法做到的。您可以这样做，但我认为这不是一个好主意。很酷，我不知道Angular 1.5组件，从我读到的内容来看，它们似乎做了我想做的事情。不幸的是，我的解决方案是Angular 1.2，所以目前这不是一个选项。我已经做了一个快速的hacky指令，将指令的隔离范围暴露给父控制器，也许我可以将它添加到我的问题中。组件只是一个简化的指令，你也可以对普通指令做同样的事情。

<div ng-controller="myController">
    <accordion data="accordion">
        <div ng-repeat="c in collection">
            <accordion-pane>
                <slider data="slider"></slider>
            </accordion-pane> 
        </div>
    </accordion>
</div>