angularjs modal service broadcast and on issue

Question

I am using angular-modal-service library. My logic is : when the modal is open it runs a function from SomeService, and $rootScope.$broadcast from SomeService to modal controller that way I can send resource from service to my modal controller. However, it doesn't fire. Please help me to figure out what I have missed. Thank you.

**Service: **

angular.module('ng-laravel').service('SomeService', function($rootScope, Restangular, CacheFactory, $http) {
     this.testFunction = function() {
        console.log("from service");
        $rootScope.$broadcast('event', {success:'success'});
     };
}

**Controller: **

$scope.show = function(customer_id) {

        ModalService.showModal({
            templateUrl: 'modal.html',
            inputs: {
                customer_id: customer_id
            },
            scope: $scope,
            controller: function($scope, close) {
                $scope.customer_id = customer_id;
                $scope.close = function(result) {
                    close(result, 500); // close, but give 500ms for bootstrap to animate
                };
                $scope.$on('event', function(event, data){
                    alert('yes');
                    console.log('from modal controller');
                });
            }
        }).then(function(modal) {
        SomeService.testFunction(customer_id, tour_id);
            modal.element.modal();
            modal.close.then(function(result) {
                $scope.message = "You said " + result;
            });
        });
    };

After switching the function it works, but... how could i pass data in to modal? like ui-bs-modal, they have resolve.

@PrashantGhimire there is no need to return `this` from service.. `service` will return `this`(context) of function implicitly — Pankaj Parkar, Mar 18 '17 at 07:08

Pankaj Parkar · Accepted Answer · 2017-03-18T07:25:03.247

1

You're being broadcasting event before events from modal controller are binding. So before broadcasting event make sure that event listeners are registered(meaning modal controller has been loaded). So call SomeService.testFunction(); after showModal method.

$scope.show = function(customer_id) {
    ModalService.showModal({
        templateUrl: 'modal.html',
        inputs: {
            customer_id: customer_id
        },
        scope: $scope,
        controller: function($scope, close) {
           //code as is
           //listeners will get register from here.
        }
    })
   .then(function(modal) {
       SomeService.testFunction(); //broadcasting event
    }).catch(function(error) {
      // error contains a detailed error message.
      console.log(error);
    });
};

edited Mar 18 '17 at 07:25

answered Mar 18 '17 at 07:04

Pankaj Parkar

134,766
23
234
299

1

You should probably **chain** from the `show.modal` promise since it has to asynchronously fetch the templateURL. – georgeawg Mar 18 '17 at 07:20
@georgeawg hey thanks for heads up mate. Appreciate your catch.. :) I missed that silly thing ;) – Pankaj Parkar Mar 18 '17 at 07:25
that's great, it works. it took me couple hours. : ( – Hao Phung Mar 18 '17 at 08:31
The reason why, i put it on the top of the modal open part, i don't wanna pass parameter in to the controller. seem like i have to. – Hao Phung Mar 18 '17 at 08:46
Which parameters you're talking about – Pankaj Parkar Mar 18 '17 at 08:47
Then how could i pass some parameters into the that service function, i need to pass some data from parent $scope into modal – Hao Phung Mar 18 '17 at 08:57
i would like to pass 2 variable from controller $scope – Hao Phung Mar 18 '17 at 09:09
@HaoPhung will go through `angular-modal-service` API and let you know, Thanks :) – Pankaj Parkar Mar 18 '17 at 09:40
Thank you so much, I read through their document, there is no resolve data provided – Hao Phung Mar 18 '17 at 09:43

score 1 · Answer 2 · answered Mar 18 '17 at 07:04

You are broadcasting the event, before the modal controller is instantiated or created, as service function is called before ModalService.showModal. Try changing the order. That should work fine.

Inside $scope.show try this order

$scope.show = function(){
 ModalService.showModal({
       ....
       // Listen for broadcast event
 });
 SomeService.testFunction();
}

angularjs modal service broadcast and on issue

2 Answers2