1

I've a web page where I've implemented the bootstrap modal dialog. I want to call a method from the main controller on a button click in the modal dialog and I want to pass the value to the method. How can I achieve this.

Ajay Srikanth
  • 1,095
  • 4
  • 22
  • 43

1 Answers1

2

Take a look at this plnkr I created: http://plnkr.co/edit/2VuKmVidfMpnkSigeips?p=preview

This is how you create a modal dialog:

$scope.onClick = function() {
      var modalInstance = $modal.open({
        templateUrl: 'content.html',
        controller: 'ModalInstanceCtrl',
        size: 'sm',
        resolve: {
          item: function () {
            return $scope.item;
          }
        }
      });

      modalInstance.result.then(function (returnedInput) { <-- This is where you expect the value passed to modalInstance.close(value).
        $scope.test = returnedInput;  
      }, function() {
        // dismissed with cancel button
      })

    };

The idea is to call close() when you press OK:

$modalInstance.close($scope.myinput);

to pass data from the modal dialog's controller back to the main controller.

Edit: I updated the plnkr to show how you can directly change the state of an item in main controller from a modal without closing the modal. In essence, you want to invoke some method from a modal to change the state of an object in main controller.

restassured
  • 1,008
  • 2
  • 9
  • 12
  • Thanks restassured !!!, here you are actually closing the modal dialog and going back to the main page, but I want to remain in the modal dialog even after the function call. 'Close' is the method given by bootstrap. Can I use any of my own methods as I don't want my modal to be closed. – Ajay Srikanth Feb 10 '15 at 23:29
  • Does my edit answer your question or do you need more clarification? – restassured Feb 11 '15 at 00:50
  • Thank you restassured. this looks good, let my try to implement this. Hoping that this will solve my issue. I've a global root controller say WrapperCntrl which serves as a parent to all other controllers in my application. This WrapperCntrl holds the common functions that I need accross my application. Now, my parent controller say cntrlA, which is a parent to my modal cntrlB. When I clk a btn on my modal I want to call a method from my cntrlA which will in turn make a call to the common method that is available in WrapperCntrl. I would even need to pass parameters – Ajay Srikanth Feb 11 '15 at 17:26
  • Yes, let me know if you need more help. And you can mark the answer as accepted when you're comfortable. – restassured Feb 11 '15 at 17:59
  • Hi restassured, i've found much more easier way to call the method from my WrapperCntrl, which is like this $rootScope.$$childHead.wrapCtrl.method(), but the question now is, is it a good idea to use $$childHead? – Ajay Srikanth Feb 11 '15 at 21:35
  • While you could use $$childHead / $childTail, it is definitely not good practice. How would you even know if $$childHead contains wrapCtrl anyway? Wouldn't you have to iterate through all the child scopes of $rootScope? Anyway, if you're looking for a classy solution, I'd use $emit to communicate from a child to a parent via messaging. Think of $emit as a way to drop a message onto an event bus, and $on as a way for a parent to listen to that message. Take a look at this example: http://stackoverflow.com/questions/14502006/working-with-scope-emit-and-on – restassured Feb 12 '15 at 03:54