When I try to close Angular Bootstrap Modal inside Angular 1.5 ponent, it throws Error: $injector:unpr Unknown Provider.
It works fine, if I use Controller instead of Component. Am I missing something?
Demo at Plunker
<!doctype html>
<html ng-app="app">
<head>
<script src=".5.3/angular.js"></script>
<script src=".5.3/angular-animate.js"></script>
<script src=".3.2.js"></script>
<script src="example.js"></script>
<link href=".3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Angular Modal Demo</h1>
<my-content></my-content>
</body>
</html>
Script
angular.module('app', ['ngAnimate', 'ui.bootstrap']);
angular.module('app')
ponent('myContent', {
template: 'I am content! <button type="button" class="btn btn-default" ng-click="$ctrl.open()">Open Modal</button>',
controller: function ($uibModal) {
this.open = function () {
$uibModal.open({
template: '<my-modal></my-modal>'
});
};
}
});
angular.module('app')
ponent('myModal', {
template: '<div class="modal-body">I am a modal! <button class="btn btn-warning" type="button" ng-click="$ctrl.close()">Close Modal</button></div>',
controller: function ($uibModalInstance) {
this.close = function () {
$uibModalInstance.dismiss('cancel');
};
}
});
When I try to close Angular Bootstrap Modal inside Angular 1.5 ponent, it throws Error: $injector:unpr Unknown Provider.
It works fine, if I use Controller instead of Component. Am I missing something?
Demo at Plunker
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis./ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="http://ajax.googleapis./ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>
<script src="example.js"></script>
<link href="http://netdna.bootstrapcdn./bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Angular Modal Demo</h1>
<my-content></my-content>
</body>
</html>
Script
angular.module('app', ['ngAnimate', 'ui.bootstrap']);
angular.module('app')
.ponent('myContent', {
template: 'I am content! <button type="button" class="btn btn-default" ng-click="$ctrl.open()">Open Modal</button>',
controller: function ($uibModal) {
this.open = function () {
$uibModal.open({
template: '<my-modal></my-modal>'
});
};
}
});
angular.module('app')
.ponent('myModal', {
template: '<div class="modal-body">I am a modal! <button class="btn btn-warning" type="button" ng-click="$ctrl.close()">Close Modal</button></div>',
controller: function ($uibModalInstance) {
this.close = function () {
$uibModalInstance.dismiss('cancel');
};
}
});
- Possibly related to this issue – Rob J Commented Apr 28, 2016 at 20:20
3 Answers
Reset to default 12I had the same problem with using $uibModal and 1.5 ponents. To solve problem We need to use ponent property of object attribute used in open method.
var modalInstance = $uibModal.open({
ponent: 'someComponentWithContent', //here name of ponent
resolve: {
user: function () {
return user; //example resolve
}
}
});
Documentation of $uibModal says that we have below properties set in ponent:
close - A method that can be used to close a modal, passing a result. The result must be passed in this format: {$value: myResult}
dismiss - A method that can be used to dismiss a modal, passing a result. The result must be passed in this format: {$value: myRejectedResult}
modalInstance - The modal instance. This is the same $uibModalInstance injectable found when using controller.
resolve - An object of the modal resolve values. See UI Router resolves for details.
So instead of using dependency injections We need to use bindings in ponent.
var someComponentWithContent={
bindings:{
modalInstance:"<",
resolve:"<"
},
controller:someComponentController,
template:"Some template"
};
And last thing how to use it in controller of ponent:
function someComponentController(){
//here example usage of dismiss
this.modalInstance.dismiss('cancel'); //this.modalInstance is $uibModalInstance
console.log(this.resolve); //here object with resolved params
}
Plunker: http://plnkr.co/edit/JQlavU0Uxq69WdYxMEmz?p=preview
You need to add ui.bootstrap as a dependency here:
angular.module('app').ponent('myModal'...
Bees
angular.module('app', ['ui.bootstrap']).ponent('myModal'...
For clarity, and to avoid re-typing, just do this:
var app = angular.module('app', [ /* dependencies here */ ]);
app.controller();
app.config();
//etc.. etc...
Maciej Sikora is correct. But also you need to update ui bootstrap to version > 2.1.0, otherwise it wont work.