I am trying to get a uibmodal to work but I was getting the following errors.
"Template for directive 'uibModalBackdrop' must have exactly one root element. uib/template/modal/backdrop.html"
and
"Template for directive 'uibModalWindow' must have exactly one root element. uib/template/modal/window.html"
while the template have only one root element.
This is the page where the modal is supposed to be loaded:
<div class="col-md-8">
<div><h1>Categorien</h1>
<div class="row">
<div class="col-md-9"></div>
<div class="col-md-2">
<button type="button" class="btn btn-success btn-lg" ng-click="ctrl.openUpdateModal()">Niewe Categorie</button>
</div>
<div class="col-mid-1"></div>
</div>
<div>
<table class="table table-striped">
<thead >
<tr>
<th colspan="1">id</th>
<th colspan="1">name</th>
<th colspan="1">remove</th>
<th colspan="1">edit</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="category in ctrl.categories">
<td>{{category.id}}</td>
<td>{{category.name}}</td>
<td><img src="public/images/no.png"></td>
<td><img src="public/images/edit1.png"></td>
</tr>
</tbody>
</table>
</div>
</div>
and this is the controller of that page:
(function(){
var module = angular.module('catalog');
module.controller('CategoryController', CategoryController);
CategoryController.$inject = ['CategoryService', '$uibModal'];
function CategoryController(CategoryService, $uibModal) {
var vm = this;
vm.categories = [];
vm.addCategory = addCategory;
vm.openUpdateModal = openUpdateModal;
vm.updateCategory = updateCategory;
vm.deleteCategory = deleteCategory;
refresh();
function refresh(){
// CategoryService.getCategories().then(function(categories){
vm.categories = [
{id: 01, name: 'Something'},
{id: 02, name: 'Something'},
{id: 03, name: 'Something'},
{id: 04, name: 'Something'}];
// });
}
function addCategory(category){
CategoryService.addCategory(category).then(function(){
vm.categories = {};
refresh();
});
}
function openUpdateModal() {
var instance = $uibModal.open({
templateUrl: "/modules/catalog/template/category-create-modal.html",
controller: 'CategoryModalController',
controllerAs: 'ctrl'
})
}
function updateCategory(category) {
CategoryService.updateCategory(category).then(function(){
refresh();
})
}
function deleteCategory(category) {
CategoryService.deleteCategory(category).then(function(){
refresh();
})
}
}
}).call(this);
and this is the modal's controller:
(function(){
var module = angular.module('catalog');
module.controller('CategoryModalController', CategoryModalController);
CategoryModalController.$inject = ['$uibModalInstance'];
function CategoryModalController($uibModalInstance){
var vm = this;
vm.ok = function () {
$uibModalInstance.close(vm.selected.item);
};
vm.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
}
}).call(this);
