Angularjs - Angular Ui $Modal and $Modalinstance Within One Controller
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...
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.
2 Answers
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');
};
});
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');
};
Alexander Ross has covered the video game industry for a decade, writing deep dives on game design, esports tournaments, VR developments, and gaming culture.
