How to pass data between controller on different files in Angularjs - angularjs

Question

I have a page with the Controller_1
the Controller_1 open a modal with a different controller on a different file that we call Controller_2
and then the Controller_2 open another modal that have a different controller on a different file that we call Controller_3
so we have:
Controller_1 --Open Modal--> Controller_2 --Open Modal--> Controller_3
when i close the modal with the Controller_3, I want to pass a value to the Controller_1.
my code:
Controller_1 open a modal with the Controller_2
app.controller("Controller_1", ['$scope', '$http', '$modal',
function ($scope, $http, $modal) {
$scope.openModal_1 = function () {
var modalInstance = $modal.open({
templateUrl: '/SomeFolder/FileWithController_2',
controller: 'Controller_2',
});
}
}]);
Controller_2 open a modal with the Controller_3
app.controller("Controller_2", ['$scope', '$http', '$modalInstance', '$modal',
function ($scope, $http, $modalInstance, $modal) {
$scope.SaveSomething = function () {
$http.post(url, obj)
.success(function (data) {
var modalInstance = $modal.open({
templateUrl: '/SomeFolder/FileWithController_3',
controller: 'Controller_3',
}
});
}).error(function () {
});
};
}]);
Controller_3 save something then close and pass some data to the Controller_1
app.controller("Controller_3", ['$scope', '$http', '$modalInstance',
function ($scope, $http, $modalInstance) {
$scope.SaveSomething = function () {
$http.post(url, obj)
.success(function (data) {
... pass some code to Controller_1 and close this modal.
});
}).error(function () {
});
};
}]);
Assuming that everything is working fine and all I want to do is passing some data from Controller_3 to Controller_1.
My question is:
How I can pass the data from Controller_3 to Controller_1?
I already tried pass the $scope when I open the modal as follows:
//from Controller_1 to Controller_2
var modalInstance = $modal.open({
templateUrl: '/SomeFolder/FileWithController_2',
controller: 'Controller_2',
scope: $scope,
});
in this case it work only for the Controller_2, so any modification on $scope will affect the Controller_1 but it is not working the same way if i do the same for Controller_3
I tried $emit and $on but it do not work too because they are not parent and child like this:
<div ng-controller="ParentCtrl">
<div ng-controller="ChildCtrl"></div>
</div>
they are complete different controllers in different files.

Answer 1

See $parent in Angular doc
Declare your modal instance,
var modalInstance = $modal.open({
templateUrl: '/SomeFolder/FileWithController_3',
controller: 'Controller_3',
scope: $scope.$parent,
});
So you can basically call a method or edit a property from controller_1 in your controller_3.
app.controller("Controller_3", ['$scope', '$http', '$modalInstance',
function ($scope, $http, $modalInstance) {
app.controller("Controller_3", ['$scope', '$http', '$modalInstance',
function ($scope, $http, $modalInstance) {
$scope.SaveSomething = function () {
$http.post(url, obj)
.success(function (data) {
$scope.$parent.modethodToCall(data);
})
.error(function () {});
};
}]);
I think you have to add another $parent because $modal create it's own child $scope. If someone can confirm ?
I personnaly won't recommand to use parent properties/methods. In my projects i create modal instance with params and return an object on modal closure. (See $modal in Angular ui doc)
$modalInstance.close(data);

Answer 2

You may use events and listen to these events.
Follow bellow an example:
app.controller('controller1', ['$scope','$rootScope', controller1]);
function controller1($scope, $rootScope){
$scope.$on('informController1', informController1);
function informController1(information){
//information displayed on the controller 1 related view
$scope.ctrl1Information = information;
}
}
app.controller('controller2', ['$scope','$rootScope', controller2]);
function controller2($scope, $rootScope){
//controller2 logic
}
app.controller('controller3', ['$scope','$rootScope', controller3]);
function controller3($scope, $rootScope){
$scope.$on('informController3', informController3);
function informController3(information){
//information displayed on the controller 3 related view
$scope.ctrl3Information = information;
}
function closeModal(){
//close modal code...
$rootScope.$broadcast('informController1', $scope.ctrl3Information);
}
}
For this approach to work, you have to make sure the controller is loaded when the event was triggered.