Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:

I would like to ask, I understand that AngularUI's modal consist of 2 controllers 1 is the default controller that I use to process data and the other one is to handle $modelInstances, which is fine for me. But what I wanted to do is I have several scopes that I will be using while rendering/editing data in my modal display. Instead of resolving all these scope between controllers what i tried to do is to merge both controllers together so the scopes can be shared among the webpages. (Noted that its a realtime scope) What I did is like below

angular.module('app', ['ngAnimate', 'ui.bootstrap']);
angular.module('app').controller('ModelCtrl', function ($scope, $modal, $modalInstance) {

  $scope.items = ['item1', 'item2', 'item3'];
  //I have a few more scopes to be used in the model

  $scope.open = function (size) {

    var modalInstance = $modal.open({
      animation: true,
      templateUrl: 'myModalContent.html',
      controller: 'ModelCtrl',
      size: 'lg',
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function () {

    }, function () {

    });
  };

  $scope.ok = function () {
    $modalInstance.close($scope.selected.item);
  };

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

I've combined both controller into one, and inject the relevant modules back so it would work, theoretically. But instead what I've got is an error saying [$injector:unpr] Unknown provider: $modalInstanceProvider <- $modalInstance <- ModelCtrl. Understand from this error which mean I have injected an unknown provider $modalInstanceProvider so I've tried to remove the $modalInstance from the modules, the Modal managed to open but the the action for close and dismiss throws me an error of $modalInstance is not defined. What have i done wrong and how should i combine both controllers instead of separating them into 2?

here is the plunkr link so you can understand what i mean. thank you.

share|improve this question
    
i hope this will not work, i dislike modal popup angularjs – ramamoorthy_villi Aug 17 at 7:25
    
No, you not able to use $model and $modalInstance in same controller. – gaurav bhavsar Aug 17 at 7:31
    
@gauravbhavsar any alternative to this? – Kenny Yap Aug 17 at 7:36
1  
Hi, not sure that you should actually combine the two controllers.... both have different purposes... the most clean way to do this would be parent controller a service or factory that handles the modals settings and a modal controller... this is how I do it... and then you can always pass the data you want... if you want Ill give you an example – Jony-Y Aug 17 at 7:55
1  
@Jony-Y Thank you for your advise and yes i acknowledge such approach and I've alter my code to work in such a way. – Kenny Yap Aug 17 at 8:03

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.