Angularjs updates data in parent area after submitting modal form

Question

I cannot figure out how to update $ scope.dir in the parent scope (DirCrl) from the scope of the child object (ModalCtrl). The view is a simple modal form with one text input. When sending text input it is bound to mkdir.name in the scope of child. The child controller makes a REST call to the database and must update $ scope.dir in the parent scope with the response data. Any recommendations would be highly appreciated. Code snippet below

app.controller('DirCtrl', ['$scope', '$http', function ($scope, $http) { $scope.dir = {}; $scope.mySelections = []; $http({ method: 'GET', url: '//localhost:9090/fx/v1/dir/52cdc7304c3525ac0c5cdd3a' }) .success(function (data, status, headers, config) { $scope.dir = data; $scope.children = data.children; }) .error(function (data, status, headers, config) { }); }]); var ModalCtrl = function ($scope, $modal, $log) { $scope.mkdir = { name: 'name', data: {} }; $scope.$parent.ben = 'ben01'; $scope.open = function () { var modalInstance = $modal.open({ templateUrl: 'myModalContent.html', backdrop: true, windowClass: 'modal', controller: ModalInstanceCtrl, resolve: { mkdir: function () { return $scope.mkdir; } } }); modalInstance.result.then(function () { $scope.$parent.children = $scope.mkdir.data.children; }); }; }; var ModalInstanceCtrl = function ($scope, $modalInstance, $http, $log, mkdir) { $scope.mkdir = mkdir; $scope.submit = function () { $log.log('name of directory to create'); $log.log(mkdir.name); $http({ method: 'GET', url: '//localhost:9090/fx/v1/dir/52cdcce74c358cdfe2fa2c83' }) .success(function (data, status, headers, config) { $scope.mkdir.data = data; }) .error(function (data, status, headers, config) { }); $modalInstance.dismiss('cancel'); } $scope.cancel = function () { $modalInstance.dismiss('cancel'); }; }; 

Answer 1

CORRECTION:

In the child case, do something like:

 $scope.$emit('whatevereventnameyouwant', data); 

In parent mode, listening for this event:

 $rootScope.$on('whatevereventnameyouwant', function(event, data) { console.log(data); }); 

Answer 2

Using a promise (standard way)

The standard way to return data back to the calling controller after closing the modality is to register a callback after the promise has been removed:

 modalInstance.result.then(function (selectedItem) { $scope.selected = selectedItem; }, function () { $log.info('Modal dismissed at: ' + new Date()); }); 

Using Events

You can also send an event up the hierarchy of regions by calling $ emit :

 $scope.$emit(name, args); 

Then the parent area can listen for the event by calling $ on :

 $scope.$on('eventName', function(event, data) { console.log(data); }); 

When creating a new modal value, $ scope will be a child of the size of $ rootScope by default. When $ emit () is called, it scans its own region (i.e., the $ modal region) for any registered listeners, calls them (if present), and then crosses the chain of regions up until the parent ends. If the parent scope is not specified when creating the modal object, call $ scope. $ Emit ('eventName', data) will bypass the controller scope when evaluating the scope chain. Both the calling controller and the modal controller can work directly with $ rootScope when calling $ emit () and $ on (), but you usually want to associate the modal region with it, invoking the hierarchy of the $ -region of the controller. To set the parent modal scope, set the scope parameter to the $ scope scope as follows:

  var modalInstance = $modal.open({ templateUrl: 'myModalContent.html', backdrop: true, windowClass: 'modal', controller: ModalInstanceCtrl, scope: $scope, resolve: { mkdir: function () { return $scope.mkdir; } } }); 

Answer 3

It looks like you want $scope.$emit() to return to the parent.

In the child case, do something like:

 $scope.$emit('whatevereventnameyouwant', data); 

In parent mode, listening for this event:

 $scope.$on('whatevereventnameyouwant', function(event, data) { console.log(data); }); 

Answer 4

Use the promise interface that uibModal returns. Let's say you have a DELETE button in modal mode, and when you click, you remove one item from the list presented in the parent view (parent area):

MODAL CONTROLLER

 $scope.deleteItem = function() { $http.delete(...).then(function() { $uibModalInstance.close(true) // instead of true you can pass an object }) } 

PARENT CONTROLLER

 var modalInstance = $uibModal.open({ templateUrl: '...', controller: 'ModalController', }); modalInstance.result.then(function(data) { // what you pass in $uibModalInstance.close(true) will be accessible here. if (data) { refreshItems(); } });