I have these two views:
1) foo.html
<p>Hello {{name}}</p>
2) foo-as-modal.html
<div class="modal-header">
<h3 class="modal-title">I'm a modal</h3>
</div>
<div class="modal-body">
<ng-include src="'foo.html'"></ng-include>
</div>
<div class="modal-footer">
<button class="btn btn-default" ng-click="cancel()">Close</button>
</div>
The controller for foo.html is fooController
:
angular.module('myApp').controller('fooController', ['$scope','$uibModalInstance', function($scope,$uibModalInstance) {
$scope.name = "John"
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
}]);
I need to inject $uibModalInstance
to fooController
for the .dismiss
to work
That works great when I invoke foo-as-modal.html
as a modal, ie:
var modalInstance = $uibModal.open({
templateUrl: 'foo-as-modal.html',
controller: 'fooController',
scope: $scope.$new(),
size: 'lg'
});
But it throws error when I invoke foo.html
as a normal view (via $routeProvider
and ng-view
directive), ie:
.when('/foo', {
templateUrl: 'foo.html',
controller: 'fooController'
})
Error is:
Error: [$injector:unpr] Unknown provider: $uibModalInstanceProvider <- $uibModalInstance <- fooController
And the view doesn't display "John" (because of the error)
How can I solve this? I really NEED to reuse foo.html
and fooController
as a modal and non-modal, because they have lots of stuff (I've simplified here)
EDIT: Here is a plunkr:
Well I solved this way:
$uibModalInstance
from fooController
When invoking the modal, I pass the modalInstance as a variable to the modal's scope:
var modalScope = $scope.$new();
var modalInstance = $uibModal.open({
templateUrl: 'foo-as-modal.html',
controller: 'fooController',
scope: modalScope
});
modalScope.modalInstance = modalInstance;
Dismiss the modal with the scope variable:
$scope.modalInstance.dismiss('cancel'); // instead of $uibModalInstance.dismiss(..)
Here is a fork of the original plunkr, with this solution: https://plnkr.co/edit/ZasHQhl6M5cCc9yaZTd5