我想让uibmodal工作,但我遇到了以下错误。
“指令'uibModalBackdrop'的模板必须只有一个根元素.uib / template / modal / backdrop.html”
和
“指令'uibModalWindow'的模板必须只有一个根元素.uib / template / modal / window.html”
虽然模板只有一个根元素。
这是应该加载模态的页面:
<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>
这是该页面的控制者:
(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);
这是模态的控制器:
(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);
答案 0 :(得分:1)
您的HTML无效,您未关闭col-md-8
。这是正确的HTML:
<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>
</div>
答案 1 :(得分:1)
如果你使用的是angular-bootstrap,你需要加载脚本模板,angular-bootstrap / ui-bootstrap-tpls.min.js
e.g
<script src="/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>