Question

我有大约四对主要的相关指令，同时显示在我的AngularJS UI中。一般来说，每一对都包含一个父列表指令，在其下面有一个相关的详细编辑器指令，如下图所示：

master-detail UI

每个右侧列表与活动左手选择具有多对一关系，并且必须始终显示相关数据。 我应该如何驱动相关列表（从左到右的关联）刷新？

目前，每个master-detail指令对或“堆栈”共享一项服务。该服务包含itemState.active（活动详细记录）和itemState.headers（查询主结果列表）。主服务器或详细信息面板中的活动调用服务，这直接影响服务状态。然后，通过简单的声明性Angular手表在这个共同的positionService.state上操作主/细节关联;几乎不需要控制器代码。我希望在这里使用服务作为单一事实，这将使我很容易在将来集成近实时显示，例如通过SignalR。这个主要细节实现仅在此提供背景，尽管我欢迎改进：

主指令，例如position-list.js

templateUrl: "position/position-list.html",
controller: ['$scope', 'positionSvc', function ($scope, positionService) {
    $scope.positions = positionService.itemState();
    $scope.select = function (position) {
        positionService.read(position.id)
    };
}

主模板，例如position-list.html

<li ng-repeat="i in itemState.headers" ng-click="select(i)">{{i.title}}</li>

服务，例如position-svc.js

this.itemState = {
    headers: [],
    active: { id: 0 },
    pending: httpSvc.pending
};

this.create = function (detail) {
    httpSvc.remote("post", detail).then(function (header) {
        itemState.headers.unshift(header);
        read(detail.id);
    });
}

this.read = function (id) {
    httpSvc.remote("get", id).then(function (detail) {
        itemState.active = detail;
    });
}

详细信息存在类似的指令和模板。它共享相同的服务。你明白了。

现在我正在寻找一种可维护的方法来处理这种左 - >右的事件遵循良好的设计实践和众所周知的AngularJS模式。我想保留我的指令的可组合性。

为了证明我不是在寻找你为我做的工作（以及组织我自己的想法），我想出了一些方法，尽管到目前为止似乎都没有。我将继续记录这些内容，请检查是否需要清理此部分。它们按消息路径分组：

leftController - ＆gt; mainApp - ＆gt; rightController
- part a：leftController - ＆gt; mainApp
  - mainApp.$scope.onLeftItemSelected（例如通过{ scope: '&' }）
  - leftController.watch
  - leftController.$parent.onLeftItemSelected（例如AngularJS access parent scope from child controller，但错误地创建了自下而上的依赖关系）
- b部分：mainApp - ＆gt; rightController
  - mainApp.$scope.$broadcast
  - mainApp.rightService.load(leftItemId)
leftController - ＆gt; mainApp模型 - ＆gt; rightController。$腕表
- 在leftController和rightController之间共享父范围变量
- 使用{ scope: '=' }将隔离范围从leftController传输到mainApp;这是JesúsQuintana的解决方案，在下面，这里：http://plnkr.co/edit/tyZPziT9VoWDFqHdF8A5?p=preview
leftController - ＆gt; $ route - ＆gt; rightController
- 实现这一点可能是理想的，允许我在我的单页面应用程序中提供深层链接/书签，但需要在选择子项时启用页面加载父层次结构，而不是仅仅反向（加载所选父项的子记录）。这需要比我目前可以证明的更大的初始投资。 http://embed.plnkr.co/DBSbiV/preview
leftService - ＆gt; rightService
- 也将nominationService注入同级positionService。设置nominationService.load(positionid)时请致电positionService.activeRecord。亲：已经工作了。骗：这是错的。这种兄弟依赖使得父列表无法使用。
- 添加自定义发布/订阅服务（https://stackoverflow.com/questions/16235689#16235822，http://jsfiddle.net/ThomasBurleson/sv7D5/）
leftService - ＆gt; $ rootScope.broadcast - ＆gt; rightService
- 不理想，假设我们的事件字符串在根命名空间中是唯一的（但性能问题已得到解决，如此处所讨论https://stackoverflow.com/questions/11252780#19498009）
leftService - ＆gt; mainApp - ＆gt; rightService
- 将positionService和nominationService注入mainApp。向positionService添加一个简单的事件列表，以向上传输通知。 PRO：这保留了leftService在整个应用程序中作为活动记录的单一事实的角色（如Martin Cortez在下面的评论中所述）
leftService - ＆gt; $ rootScope。$ route - ＆gt; rightController - ＆gt; rightService
- 见方法3的注释

参考 pass data between controllers How to communicate between controllers while not using SharedService between them?

Answer 1

基于角度图案设计，最好的方法是指令将范围绑定到＆＃39; =＆＃39; （双向绑定），并在指令内部创建$ scope。＃watch检测元素绑定的更改并在给定变量的情况下执行action函数。

在两个指令内部进行通信的方式是否更加清晰，角度检测更改并扩展到bot指令。

很抱歉，如果答案没用，但问题解释不清楚。

Angular中的兄弟指令/控制器相关列表（和主/细节）

1 个答案: