angularjs - Inject $uibModalInstance to a controllar not initiated by a $uibModal -
i have these 2 views:
1) foo.html
<p>hello {{name}}</p>
2) foo-as-modal.html
<div class="modal-header"> <h3 class="modal-title">i'm 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 foo.html foocontroller
:
angular.module('myapp').controller('foocontroller', ['$scope','$uibmodalinstance', function($scope,$uibmodalinstance) { $scope.name = "john" $scope.cancel = function () { $uibmodalinstance.dismiss('cancel'); }; }]);
i need inject $uibmodalinstance
foocontroller
.dismiss
work
that works great when invoke foo-as-modal.html
modal, ie:
var modalinstance = $uibmodal.open({ templateurl: 'foo-as-modal.html', controller: 'foocontroller', scope: $scope.$new(), size: 'lg' });
but throws error when invoke foo.html
normal view (via $routeprovider
, ng-view
directive), ie:
.when('/foo', { templateurl: 'foo.html', controller: 'foocontroller' })
error is:
error: [$injector:unpr] unknown provider: $uibmodalinstanceprovider <- $uibmodalinstance <- foocontroller
and view doesn't display "john" (because of error)
how can solve this? need reuse foo.html
, foocontroller
modal , non-modal, because have lots of stuff (i've simplified here)
edit: here plunkr:
well solved way:
- removed injection
$uibmodalinstance
foocontroller
when invoking modal, i pass modalinstance variable modal's scope:
var modalscope = $scope.$new(); var modalinstance = $uibmodal.open({ templateurl: 'foo-as-modal.html', controller: 'foocontroller', scope: modalscope }); modalscope.modalinstance = modalinstance;
dismiss modal scope variable:
$scope.modalinstance.dismiss('cancel'); // instead of $uibmodalinstance.dismiss(..)
here fork of original plunkr, solution: https://plnkr.co/edit/zashqhl6m5ccc9yaztd5
This comment has been removed by the author.
ReplyDelete