在angular-ui-router中将信息从子状态传递到父状态

I am building an angular-app with ui-router where I have a parent view and a child view.

我正在使用ui-router构建一个角度应用程序，其中我有父视图和子视图。

routerApp.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/home');

    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: '/views/home/home.html',
            controller: 'HomeController'
        })
        .state('new-assignment', {
            url: '/new-assignment',
            templateUrl: 'new-assignment.html',
            controller: 'AssignmentController'
        })
            .state('new-assignment.new-client', {
                url: '/new-client',
                templateUrl: 'new-client.html',
                controller: 'ClientController'
            })
    ;

});

The child view is used (among other things) to create a new client. So, by clicking on 'create new client' in the main view. The state is change to 'new-assignment.new-client', and the side view is shown.

使用子视图（以及其他内容）来创建新客户端。因此，通过在主视图中单击“创建新客户端”。状态将更改为“new-assignment.new-client”，并显示侧视图。

When the client is created I want to transition back to the parent view 'new-assignment' and pass along information with what client that have just been created.

创建客户端时，我想转换回父视图“new-assignment”，并传递有关刚刚创建的客户端的信息。

The parent view could still have data in its own form (for creating assignment) and should naturally not be touched.

父视图仍然可以拥有自己的数据（用于创建分配），并且自然不应该被触及。

I can detect a change by '$stateChangeSuccess' event:

我可以通过'$ stateChangeSuccess'事件检测到更改：

routerApp.controller('AssignmentController', function($scope, Assignment, Client, $log) {
    $scope.clients = Client.clients;
    $scope.$on('$stateChangeSuccess', function (e, toState, toParams, fromState, fromParams){
        $log.log(fromState.name + ' -> ' + toState.name);
        $log.log('toParams ');
        $log.log(toParams);
        $log.log('fromParams ');
        $log.log(fromParams);
    });
});

I have tried to pass info through

我试图传递信息

$state.go('^', data);

but without success...

但没有成功......

But I don't understand how to pass data to the parent view. Any ideas?

但我不明白如何将数据传递给父视图。有任何想法吗？

3 个解决方案

#1

Child view scope inherits from the scope of the parent view. So just define $scope.clients[] array in the AssignmentController. Then add the new client to that array in the ClientController.

子视图范围继承自父视图的范围。所以只需在AssignmentController中定义$ scope.clients []数组。然后将新客户端添加到ClientController中的该数组。

Take a look at this Plunker to see how the nested view scopes get access to their parent view scope.

查看此Plunker，了解嵌套视图范围如何访问其父视图范围。

#2

Rudely I will answer my own question.

粗鲁地，我会回答我自己的问题。

I decided to go with event messaging:

我决定使用事件消息：

app.controller('ClientController', function ($scope, $state, ClientService) {

    $scope.save = function (newClientData) {
        var ret = ClientService.create(newClientData);
        if (ret) {
            // Pass newly created object to parent view.
            $scope.$emit('clientCreated', newClientData);
            // Then go to that state (closing child view)
            $log.log($state);
            if ($state.current.name === 'new-client')
                return $state.go('home');
            $state.go('^');
        }
    };
});

app.controller('AssignmentController', function ($scope, Assignment, ClientService) {
    $scope.clients = ClientService.clients;

    $scope.$on('clientCreated', function (e, data) {
        $scope.clientSelected(data);
    });

    $scope.clientSelected = function (client) {
        $log.log(client);
        $scope.data.client = client;
        $scope.data.clientName = client.name;
        $scope.data.clientId = client.id;
    }
});

This code is linked to the code in my question!

此代码链接到我的问题中的代码！

#3

yes, various ideas.

是的，各种想法。

You can send the data information using query parameters. Converting your data to JSON and sending like this "$state.go('^', data)" and defining your state url with "new-assignmentww/?data".

您可以使用查询参数发送数据信息。将您的数据转换为JSON并发送如下“$ state.go（'^'，data）”并使用“new-assignmentww /？data”定义您的状态URL。

If data is assigned, you can get information and convert to object again.

如果分配了数据，您可以获取信息并再次转换为对象。

Other, you can access the parent state using "$state.$parent" and assign the value in the controller, then you can call the "$state.go('^')".

另外，你可以使用“$ state。$ parent”访问父状态并在控制器中分配值，然后你可以调用“$ state.go（'^'）”。

You can also create a callback function in controller of the parent state and call in the controller of the children state.

您还可以在父状态的控制器中创建回调函数，并在子状态的控制器中调用。

#1