是什么导致了“错误：$compile:tplrt Invalid Template Root”，而模板只有一个根元素

Question

我正在尝试让 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);

Answer 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>

Answer 2

如果你使用 angular-bootstrap，你需要加载脚本模板，angular-bootstrap/ui-bootstrap-tpls.min.js

例如

<script src="/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>