将模型更改传播到Angular中的父控制器

Question

我有一个angularJS应用程序，并会尝试模拟Asana.com功能。

方案如下：

我在body标签中有一个MainController用于我的应用程序，在这个控制器里面我在侧边栏中填充了我的名字：

.controller('MainController', ['$scope', 'NamesService', function($scope, NamesService) {
    $scope.names = NamesService.query();
    ...
};

当我点击任何名称（例如，Anna）时，我的应用程序会更改路径并在ng-view中注入name-edit.html模板，由上图中的内容区域表示。我有一个输入用于从安娜到卡罗尔和更新按钮。当我点击更新按钮时，它会触发一个在我的数据库中更新的函数，在我的内容区域中将Anna更改为Carol（由黄色箭头位置表示），但不会更改侧边栏中的红色箭头位置。

我尝试在成功更新回调中再次调用以下代码，但无法正常工作

$scope.names = NamesService.query();

我想知道如何将子控制器传播到父控制器，在$ scope.names中将Anna更改为Carol。是否可以这样做，而无需重新加载$ ​​scope.names？

Answer 1

您可以使用$scope.$emit('eventName', eventData)使用Angular的事件系统，让您的子控制器在层次结构上传递数据。

//child, assuming you have promise callback
NamesService.query().then(function(data){
   $scope.$emit('eventName', data)
})

在您的父控制器中有以下

//parent
$scope.$on('eventName', function(event, data){
   $scope.names = data;
})