3

I have this situation

two files, both in the same app

var app = angular.module('myapp');

file one is the parent and I have:

app.controller("ControllerOne", ['$scope', '$http', '$modal', 
function ($scope, $http, $modal) {


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

$scope.openModal = function () {

    var modalInstance = $modal.open({
        templateUrl: '/SomeFolder/FileWithControllerTwo',
        controller: 'ControllerTwo',
        size: 'lg',
        resolve: {
            someParam: function () {
                return "param"
            }
        }
    });
}

}]);

file two is the child and I have:

app.controller("ControllerTwo", ['$scope', '$http', 'someParam',
    function ($scope, $http, someParam) {


        $scope.SaveSomething = function () {

            $http.post(url, obj)
                .success(function (data) {

                        $scope.$emit('refreshList', [1,2,3]);

                }).error(function () {

                });

        };

    }]);

Assuming that i can open the modal and I can "SaveSomething".

What I need to do to send some data from ControllerTwo to ControllerOne?

I already checked this post Working with $scope.$emit and .$on but I cant't solve the problem yet.

Obs:

  • FileOne.js -> I have the ControllerOne (parrent) -> $on
  • FileTwo.js -> I have the ControllerTwo (child) -> $emit
  • Yes, I can hit the code inside $http.post.success condition
Community
  • 1
  • 1
Gilian Moa
  • 75
  • 2
  • 9

1 Answers1

5

Assuming you are using angular-ui bootstrap (which has a $model), then the $scope in the model is a childscope of $rootScope.

According to $model documentation you can supply the ControllerOne $scope by using the scope option which will make the modal's $scope a child of whatever you supply. Thus:

var modalInstance = $modal.open({
    templateUrl: '/SomeFolder/FileWithControllerTwo',
    controller: 'ControllerTwo',
    size: 'lg',
    scope: $scope,
    resolve: {
        someParam: function () {
            return "param"
        }
    }
});

Then you could emit to that using $scope.$parent.$emit(...). Strictly speaking, this creates a coupling in that it assumes that the user of the modal listens to the events.

If you don't want to inject your scope, they you could inject $rootScope and emit on that. But that would also send the event to every scope in the application.

This is assuming that you actually want to leave the modal open and send a message back to the parent controller. Otherwise, just use close() or dismiss() methods.

ajkavanagh
  • 116
  • 1
  • 3
  • 1
    hello @ajkavanagh thank you very much Just supplying the modal child with $scope solved my problem. Now i can call a function from parent controller and pass the data i wanted to $emit before and now it is working fine. – Gilian Moa Apr 21 '15 at 21:04
  • Hi @GilianMoa: Just to clarify: did you _not_ need to use `$scope.$parent.$emit(...)` to send the message. i.e. did `$scope.$emit(...)` work? If so, I'll amend my answer to clarify that. Thanks. – ajkavanagh Apr 22 '15 at 07:31
  • Hi @ajkavanagh, I did not need to use the $emit and $on, just passing the $scope when i open the modal already solved my problem – Gilian Moa Apr 22 '15 at 07:43
  • Maybe I will have to use the $scope.$parent now or $rootScope to access the parent parent scope, because I open a modal and another modal and i have to access the first controller that call the first modal. but Im still studying possibilities to do this. – Gilian Moa Apr 22 '15 at 07:50
  • if you pass in the scope of the controller invoking the modal you do not need to emit using the $scope.$parent, $scope.emit works just fine. I believe the emit will cascade upwards to each ancestor like it would if you embedded a controller in a more standard fashion – Merritt Dec 19 '15 at 09:13