[英]Inject $uibModalInstance to a controllar not initiated by a $uibModal
I have these two views: 我有这两种观点:
1) foo.html 1)foo.html
<p>Hello {{name}}</p>
2) foo-as-modal.html 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
: foo.html的控制器是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 我需要注入$uibModalInstance
到fooController
为.dismiss
工作
That works great when I invoke foo-as-modal.html
as a modal, ie: 当我调用foo-as-modal.html
作为模态时,这很有效,即:
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: 但是当我将foo.html
作为普通视图(通过$routeProvider
和ng-view
指令)调用时,它会抛出错误,即:
.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) 并且视图不显示“John”(因为错误)
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) 我真的需要重用foo.html
和fooController
作为模态和非模态,因为它们有很多东西(我在这里简化了)
EDIT: Here is a plunkr: 编辑:这是一个plunkr:
https://plnkr.co/edit/9rfHtE0PHXPhC5Kcyb7P https://plnkr.co/edit/9rfHtE0PHXPhC5Kcyb7P
Well I solved this way: 我解决了这个问题:
$uibModalInstance
from fooController
从fooController
删除了注入$uibModalInstance
fooController
When invoking the modal, I pass the modalInstance as a variable to the modal's scope: 在调用模态时, 我将modalInstance作为变量传递给模态的范围:
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 这是原始plunkr的一个分支,有这个解决方案: https ://plnkr.co/edit/ZasHQhl6M5cCc9yaZTd5
You can not use the same controller for a page view and for a modal window. 您不能将同一个控制器用于页面视图和模态窗口。 At least, untill controller depends on $uibModalInstance
. 至少,直到控制器依赖于$uibModalInstance
。
$uibModalInstance
can be injected only in modals. $uibModalInstance
只能在模态中注入。
One way to do this is to resolve $uibModalInstance
in the route with null (or an empty string/or whatever you please) and inject it into the controller. 一种方法是在路由中解析$uibModalInstance
(或者为空字符串/或任何你喜欢的东西)并将其注入控制器。 If the html page isn't opened as a modal, you still have $uibModalInstance
. 如果html页面没有作为模态打开,你仍然有$uibModalInstance
。 If it's opened as a modal, $uibModalInstance
is automatically injected. 如果它作为模态打开, $uibModalInstance
自动注入$uibModalInstance
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.