传播模式的变化对角父控制器控制器、模式

2023-09-13 04:16:48 作者:我牵你到止境

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

I have a an angularJS application and would try to simulate a Asana.com feature.

该场景如下:

我有我的body标签应用MainController,而这个控制器我填充我的侧边栏我的名字里:

I have a MainController for my application in the body tag, and inside this controller I populate my names in my sidebar:

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

当我在任何名称点击(例如,安娜),我的应用程序更改路线及注入我的NG-名字来看,edit.html模板,再$ P $的内容区域上的图片上面psented 。我用来改变从安娜卡罗尔和一个更新按钮输入。当我打的更新按钮,它激发了我的数据库更新功能,改变了安娜Carol在我的内容区域(由黄色箭头位置psented重新$ P $),但不会改变我的侧栏红色箭头的位置。

When I click on any name (for example, Anna), my application change the route and in inject the name-edit.html template in my ng-view, represented by the content area on the picture above. I have a input used to change from Anna to Carol and a update button. When I hit the update button, It fires a function that updates in my database, changes Anna to Carol in my content area (represented by the yellow arrow position) but doesn't change the red arrow position in my sidebar.

我试图再次拨打以下code我的成功更新回调里面,但不工作

I tried to call the following code again inside my success update callback, but doesn't work

$scope.names = NamesService.query();

我想知道如何给孩子控制器传播到父控制器,改变安娜卡罗尔在$ scope.names。是否有可能做到这一点,无需重新加载$ ​​scope.names?

I'd like to know how to propagate the child controller to the parent controller, changing Anna to Carol inside $scope.names. Is it possible to do this, without reloading $scope.names?

推荐答案

您使用 $范围可以使用角的事件系统。$发出(eventName的',EVENTDATA)取消你的孩子的控制器传递层次的数据了。

You could use event system of Angular using $scope.$emit('eventName', eventData) un your child controller to pass data up on the hierarchy.

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

而在你的父控制器具有以下

And in your parent controller have the following

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