Angular Calling Modal Open function from one controller to another

Question

I have a Modal window in my header, with a Click event link in my header to open and close the Modal Window...and this works fine. I.e.

<div class="header" ng-controller="headerCtrl">
...
          <li><a href ng-click="open()">Report an Issue</a></li>
...
</div>

and then my controllers

 .controller('headerCtrl', ['$location', '$scope', '$log', '$modal', function ($location, $scope, $log, $modal) {
    'use strict';
    (function () {// init
      $scope.open = function (size) {
        var modalInstance = $modal.open({
          templateUrl: 'views/help/supportModalContent.html',
          controller: 'supportInstanceCtrl'
        });
      };
    })();
  }])

  .controller('supportInstanceCtrl', ['$location', '$scope', '$log', '$modalInstance','$state', function ($location, $scope, $log, $modalInstance,$state) {
    'use strict';
    (function () {// init
      $scope.ok = function () {
        $modalInstance.close($scope.selected.item);
      };
      $scope.isCollapsed = false;
      $scope.message_sent = false;
    })();

    $scope.cancel = function () {
      $modalInstance.dismiss('cancel');
    };

    $scope.faq = function () {
      $modalInstance.close('cancel');
      $state.go('faq');
    };

    $scope.help = function () {
      $modalInstance.close('cancel');
      $state.go('help');
    };

    $scope.send = function () {
      $scope.isCollapsed = true;
      $scope.message_sent = true;
    };
  }])

The problem is now in one of my main content view, I now also have a link below which says something click here for support. And I want to open the same modal window again. So I did this

  .controller('noResultCtrl', ['$location','$scope','$log','search','$state','$modal',function ($location,$scope,$log,search,$state,$modal) {
    'use strict';
    $scope.open = function (size) {
      var modalInstance = $modal.open({
        templateUrl: 'views/help/supportModalContent.html',
        controller: 'supportInstanceCtrl'
      });
    };
  }])

And it works but is there a better way rather having to put this same logic in every controllers I want to call the same Modal Window in the header ?

yes.. create a service for this..

Ved
– Ved

2015-01-22 10:49:03 +00:00
Commented Jan 22, 2015 at 10:49 — Ved
– Ved, Commented Jan 22, 2015 at 10:49

Ved · Accepted Answer · 2015-01-22 10:56:34Z

7

app.service('modalProvider',['$modal', function ($modal){

this.openPopupModal= function() {
var modalInstance = $modal.open({
          templateUrl: 'views/help/supportModalContent.html',
          controller: 'supportInstanceCtrl'
        });
}

Include this service in your controllers, and call openPopupModal method.For example:

.controller('noResultCtrl', ['$location','$scope','$log','search','$state','modalProvider',function ($location,$scope,$log,search,$state,modalProvider) {
    'use strict';
modalProvider.openPopupModal();

answered Jan 22, 2015 at 10:56

Ved

12.1k5 gold badges46 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Calling Modal Open function from one controller to another

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related