Passing information from child state to parent state in angular -ui-router

Question

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

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' }) ; }); 

Children's view is used (among other things) to create a new client. Thus, by clicking "create a new customer" in the main view. The status is changed to "new-assign.new-client" and a side view is displayed.

When the client is created, I want to go to the parent view of the “new assignment” and pass on the information with which client was just created.

A parent view can still have data in its own form (to create an assignment) and, of course, should not be affected.

I can detect the change through the $ stateChangeSuccess event:

 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 tried to pass information through

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

but without success ...

But I do not understand how to pass data to the parent view. Any ideas?

Answer 1

The child view area is inherited from the parent view area. Therefore, simply define the $scope.clients[] array in the AssignmentController . Then add a new client to this array in the ClientController .

Take a look at this Plunker to see how subviews access their parent view.

Answer 2

Roughly, I will answer my question.

I decided to go with event messages:

 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 related to the code in my question!

Answer 3

yes, various ideas.

You can send data using query parameters. Converting the data into JSON and sending like this "$ state.go ('^', data)" and defining your state URL with "new data / data".

If the data is assigned, you can get the information and transform the object again.

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

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