Pass variable between controllers using $broadcast - AngularJS

Question

I have a modal which I call from a function, when I call the modal I want to pass a URL to it like so:

ng-click="showModal('abc','testUrl')"

I want to share testUrl between controllers so I'm trying this:

hmwsApp.controller('mainController', ['$scope', '$http', '$rootScope', 'ModalService', function($scope, $http, $rootScope, ModalService) {

$scope.showModal = function(modalUrl, imageUrl) {
  $rootScope.$broadcast('imageUrl', imageUrl); // <--- set global scope var
  ModalService.showModal({
    templateUrl: '/views/modals/' + modalUrl + '.html',
    controller: "ModalController"
  })
  .then(function(modal) {
    modal.element.modal();
    modal.close.then(function(result) {
      $scope.message = "Image show " + result;
    });
  });
};

}]);

Then in modal controller:

hmwsApp.controller('ModalController', function($scope, close) {

$scope.$on('imageUrl', function(response) {
  $scope.imageUrl = response; // <--- read global scope var
})

$scope.close = function(result) {
    close(result, 500); // close, but give 500ms for bootstrap to animate
};

});

The reason I'm doing this is I want to reference the URL in the modal like so:

<div class="modal-content">
  <img src="{{ imageUrl }}">
</div>

But it simply doesn't work, the img src is empty, so I guess I'm missing something but not sure what? Any ideas?

UPDATE

Also tried the following but still nothing:

$scope.$on('imageUrl', function(events, args){
  console.log(args); // <--- empty
  $scope.imageUrl = args;
});

check out this: http://stackoverflow.com/questions/19446755/on-and-broadcast-in-angular it looks like the first paramater in the on is the event and the second one is the arguments — Delta, Apr 16 '15 at 15:35

score 1 · Accepted Answer · answered Apr 16 '15 at 16:33

1

From what I can see, your ModalController isn't instantiated when you do the $rootScope.$broadcast call. You should do it AFTER you've shown the modal, otherwise it won't be "in existence" to intercept it with $scope.$on

answered Apr 16 '15 at 16:33

Ben Black

3,751
2
25
43

1

Absolutely correct - that's one of those wood for the trees moments! Many thanks – StudioTime Apr 16 '15 at 16:36

Pass variable between controllers using $broadcast - AngularJS

1 Answers1