javascript - Angular中与同级指令/ Controller 相关的列表(和主控/详细信息)

Question

我大约有四对主要的相关指令，同时显示在我的AngularJS UI中。一般而言，每对都在其顶部包含一个父列表指令，并在其下方包含一个相关的明细编辑器指令，如下图所示：



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



当前，每个主从指令对或“堆栈”共享一个服务。该服务保存itemState.active（活动详细记录）和itemState.headers（查询主结果列表）。主面板或详细信息面板中的活动将调用服务，这直接影响服务状态。然后，通过此公共positionService.state上的简单声明性Angular手表操作主/明细关联。几乎不需要控制器代码。我希望将服务用作此处的单个事实点，这将使我将来可以更轻松地集成近乎实时的显示，例如通过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-> mainApp-> rightController


部分A：leftController-> mainApp


mainApp.$scope.onLeftItemSelected（例如通过{ scope: '&' }）
leftController.$scope.$emit中的leftController.watch
leftController.$parent.onLeftItemSelected（例如AngularJS access parent scope from child controller，但错误地创建了自下而上的依赖性）

b部分：mainApp-> rightController


mainApp.$scope.$broadcast
mainApp.rightService.load(leftItemId)


leftController-> mainApp模型-> rightController。$ watch


在leftController和rightController之间共享父范围变量
使用{ scope: '=' }将隔离的范围从leftController传输到mainApp；这是JesúsQuintana的解决方案，下面和这里：http://plnkr.co/edit/tyZPziT9VoWDFqHdF8A5?p=preview

leftController-> $ route-> rightController


实现这一点可能是理想的，它允许我在单页面应用程序中提供深层链接/书签，但需要在选择子项时使页面能够加载父级层次结构，而不是相反（加载相反的子记录）选定的父项）。这需要比我目前可以证明的更大的初始投资。 http://embed.plnkr.co/DBSbiV/preview

leftService-> rightService


也将nominationService注入同级positionService中。设置nominationService.load(positionid)时呼叫positionService.activeRecord。优点：已经在工作了。骗子：错。这种同级依赖性使父列表不可重用。
添加自定义发布/订阅服务（https://stackoverflow.com/questions/16235689#16235822，http://jsfiddle.net/ThomasBurleson/sv7D5/）

leftService-> $ rootScope.broadcast-> rightService


不理想，假设我们的事件字符串在根名称空间中是唯一的（但性能问题已得到解决，如此处https://stackoverflow.com/questions/11252780#19498009所述）

leftService-> mainApp-> rightService


将positionService和nominationService注入mainApp中。向positionService添加一个简单的事件列表，以向上传输通知。 PRO：对于整个应用程序中的活动记录，这保留了leftService的角色作为单一事实点（如Martin Cortez在下面的评论中所述）

leftService-> $ rootScope。$ route-> rightController-> rightService


请参阅方法3的注释



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

Answer 1

基于角度模式设计，最好的方法是通过“ =”（双向绑定）指令绑定作用域，并在指令内部创建一个$ scope。＃watch来检测元素绑定的变化并执行给定变量的动作函数。

是在两个指令之间进行通信的更简洁的方法，可以角度检测更改并将其扩展到机器人指令。

抱歉，如果答案没有用，但问题解释得不好。