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:
https://plnkr.co/edit/9rfHtE0PHXPhC5Kcyb7P
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…