我有这两种观点:
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>
foo.html 的控制器是fooController
:
angular.module('myApp').controller('fooController', ['$scope','$uibModalInstance', function($scope,$uibModalInstance) {
$scope.name = "John"
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
}]);
我需要注入$uibModalInstance
才能fooController
工作.dismiss
当我foo-as-modal.html
作为模态调用时,这很有效,即:
var modalInstance = $uibModal.open({
templateUrl: 'foo-as-modal.html',
controller: 'fooController',
scope: $scope.$new(),
size: 'lg'
});
但是当我foo.html
作为普通视图(通过$routeProvider
和ng-view
指令)调用时它会引发错误,即:
.when('/foo', {
templateUrl: 'foo.html',
controller: 'fooController'
})
错误是:
Error: [$injector:unpr] Unknown provider: $uibModalInstanceProvider <- $uibModalInstance <- fooController
并且视图不显示“John”(因为错误)
我该如何解决这个问题?我真的需要重用foo.html
并fooController
作为模态和非模态,因为它们有很多东西(我在这里简化了)
编辑:这是一个plunkr: