Angularjs - Angular UI $modal and $modalInstance within one controller

Question

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.

No, you not able to use $model and $modalInstance in same controller. — gaurav bhavsar
– gaurav bhavsar, Commented Aug 17, 2015 at 7:31
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
– Jony-Y, Commented Aug 17, 2015 at 7:55
@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
– Kenny Yap, Commented Aug 17, 2015 at 8:03

Mohamed Youssef · Accepted Answer · 2016-05-12 07:32:44Z

You don't have to create a new controller for created modal just do this:

angular.module('app').controller('ModelCtrl', function ($scope, $modal) {

see that i didn't inject $modalInstance

then modal creation be like:

var modalInstance = $modal.open({
  animation: true,
  templateUrl: 'myModalContent.html',
  size: 'lg',
  scope: $scope, //i make modal scope the same as  ModelCtrl scope
});

then you use modalInstance that you created to manipulate the modal

so final code is

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

  $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',
      size: 'lg',
      scope: $scope
    });

    modalInstance.result.then(function () {

    }, function () {

    });
  };

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

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

user3921084 · Accepted Answer · 2018-01-19 06:30:10Z

0

I checked above answer, but modalInstance close was not working. So changed code like below, its working now.

$scope.open = function() {
$scope.$modalInstance = $modal.open({
    scope: $scope,
    templateUrl: "modalContent.html",
    size: '',
}
};

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

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

answered Jan 19, 2018 at 6:30

user3921084

91 bronze badge

Collectives™ on Stack Overflow

Angularjs - Angular UI $modal and $modalInstance within one controller

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related