嵌套控制器之间的通信答案

【问题标题】：Communications between nested controllers嵌套控制器之间的通信
【发布时间】：2016-09-24 09:47:00
【问题描述】：

我是 Angular 新手，为以下问题寻找了一个好的解决方案，但找不到一个好的选择。
我有一个由ModalDialogCtrl 控制的非常简单的模态对话框，其中包含一个已编辑的对象，例如 Rabbit 或 Dog 或 Cat 或其他任何东西。当用户按下“保存”按钮时，我希望任何允许保存的对象具有相同的功能。对话框的视图模型有一个正在编辑的对象的嵌套视图，其模板名称被替换，具体取决于编辑对象的类型。此特定视图包含特定于对象的控制器。

模态控制器：

function ModalDialogCtrl($scope) {
    // $scope.objectSpecificViewModelTemplate = "rabbit.html";
    // or
    // $scope.objectSpecificViewModelTemplate = "dog.html";
    // etc
    ctrl.save = function () {
        // need to call inner object controller's save() method here
    };

    ctrl.cancel = function () {
        // cancel editing
    };
};

模态对话框视图：

<div class="modal-header">
    <!-- Modal header -->
</div>
<div class="modal-body" id="modal-body">
    <!-- Modal body containing object-specific view model -->
    <div ng-include src="objectSpecificViewModelTemplate"></div>
</div>
<div class="modal-footer">
    <!-- Modal buttons -->
    <button class="btn btn-primary" type="button">OK</button>
    <button class="btn btn-warning" type="button">Cancel</button>
</div>

对象特定的视图模板：

<div ng-controller="RabbitCtrl">
    <p>Weight: <input type="text" ng-model="rabbit.weight" /></p>
</div>

或

<div ng-controller="DogCtrl">
    <p>Color: <input type="text" ng-model="dog.color" /></p>
</div>

特定于对象的控制器：

function RabbitCtrl($scope) {
    $scope.rabbit = { weight: 5}
    $scope.save = function() { /* save to server */ };
}
function DogCtrl($scope) {
    $scope.dog = { dog: "black"}
    $scope.save = function() { /* save to server */ };
}

当用户按下保存按钮时，我需要调用内部对象的 save() 方法。我希望模态控制器和特定于对象的控制器解耦，因为我可能想在应用程序的不同位置重用它们。所以我认为一般我的问题是：如何让父控制器调用特定的嵌套控制器方法（可以有很多嵌套控制器）或如何让内部控制器调用特定父控制器的方法？

【问题讨论】：

听起来应该是带有动态控制器的指令。 Dynamic controller for directives
@Abhijeet 我不想为了实现这个目标而将控制器变成指令。应该有不同的方式:) 现在我正在考虑通过 .emit() 和 .on() 进行消息传递，但仍然没有完成的解决方案。

标签： angularjs

【解决方案1】：

我在这里也看到了方法：

使用事件。
使用要求。在子控制器中，您需要父级并调用即：

parentCtrl.register(childCtrl)

现在在 parentCtrl 中存储指向子节点的链接：

vm.register = function(child) {
  vm.containedComponent = child;
}

并且可以调用它的任何方法。（即 onSave）

（如果您确定您的父母将始终只有一个孩子，这还不错，但是如果孩子可能会使用 ng 更改-如果您需要手动取消注册它）

【讨论】：