javascript - 错误 : [$compile:tpload] Failed to load template: uib/template/pagination/pagination. html(HTTP 状态:404 未找到)

Question

我正在创建 SharePoint Web 部件，每当我使用新的附加分页组件在 IE 中部署 Web 部件时，我都会收到此错误:

这是我的 MainController.js 文件:

(function () {
var module = angular.module('StarterProject', ['ngAnimate', 'ui.bootstrap']);
var MainController = function ($scope, StarterService, $log) {

    //Pagination
    $scope.parms = {};
    $scope.searchTabs = {};
    $scope.selectTier = 1;
    $scope.itemsPPOptions = [10, 25, 50];
    $scope.pager = {};
    $scope.pager.currentPage = 1;
    $scope.pager.itemsPerPage = 25;
    $scope.pager.maxSize = 10;

   var updatePage = function (oldval, newval) {
        var begin = (($scope.pager.currentPage - 1) * $scope.pager.itemsPerPage)
        var end = begin + $scope.pager.itemsPerPage;
       if ($scope.UICS && $scope.UICS.length){
           $scope.pager.filteredItems = $scope.UICS.slice(begin, end);
       }
    };

    $scope.$watch('pager.currentPage + pager.itemsPerPage', function () {
        updatePage();
    });

    $scope.setPage = function (pageNo) {
        $scope.currentPage = pageNo;
    }

    $scope.pageChanged = function() {
        $log.log('Page changed to: ' + $scope.currentPage);
    }

    //UICS
    var onGetRegions = function (data) {
        $scope.UICS = data;
    };

    var includeClosed = true;
    $scope.UICS = {}; 

    StarterService.GetRegions(includeClosed).then(onGetRegions, onGetRegions);
}; 

module.controller('MainController', MainController);

}());
这是我的 HTML:

<div data-ng-app="StarterProject">   
<!--SCRIPTS-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js" type="text/javascript"></script>
<script src="/_layouts/15/Project3/js/MainController.js" type="text/javascript"></script>  
<script src="/_layouts/15/Project3/js/StarterService.js" type="text/javascript"></script>   
<script src="/_layouts/15/Project3/js/ui-bootstrap.min.js" type="text/javascript"></script>  
<!--STYLE-->
<link href="/_layouts/15/Project3/styles/bootstrap.min.css" rel="stylesheet" />
<link href="/_layouts/15/Project3/styles/bootstrap-theme.min.css" rel="stylesheet" />
<link href="/_layouts/15/Project3/styles/DisplayTable.css" rel="stylesheet" />
<link href="/_layouts/15/Project3/styles/MainView.css" rel="stylesheet" />

<!--FONTS-->
<link href='https://fonts.googleapis.com/css?family=Josefin+Sans' rel='stylesheet' type='text/css' />

<div data-ng-controller="MainController">
    <div class="StarterProject">
        <div>
            <table class="table-responsive">
                <thead>
                    <tr>
                        <th>UIC </th>
                        <th>UIC KEY </th>
                        <th>ACTIVE NAME </th>
                        <th>UIC SHORT NAME </th>
                        <th>PARENT UIC KEY </th>
                        <th>PARENT UIC </th>
                        <th>SMC Region ID </th>
                        <th>REGION UIC </th>
                        <th>REGION UIC KEY </th>
                        <th>REGION NAME </th>
                        <th>HQ NAME </th>
                        <th>HQ UIC </th>
                        <th>HQ UIC KEY </th>
                        <th>BASE CMD IND </th>
                        <th>NOSC IND </th>
                        <th>USER NAME </th>
                        <th>UPDATED DT </th>
                        <th>JOB LOG ID </th>
                        <th>CREATED DT </th>
                        <th>PARENT NAME </th>
                        <th>INSTALLATION UIC </th>
                        <th>INSTALLATION NAME </th>
                        <th>INSTALLATION UIC KEY </th>
                        <th>SMC INSTALLATION UIC </th>
                        <th>SMC INSTALLATION NAME </th>
                        <th>BASE CMD SC NAME </th>
                        <th>INSTALLATION MAP COORDINATES </th>
                        <th>CLOSED IND </th>
                        <th>JOINT BASE IND </th>
                        <th>SERVICE ID </th>
                    </tr>
                </thead>
                <tbody>
                    <tr data-ng-repeat="base in filteredItems | limitTo: 100">
                        <td data-ng-bind="base.UIC" id="UIC"></td>
                        <td data-ng-bind="base.UIC_KEY" id="UIC_KEY"></td>
                        <td data-ng-bind="base.ACTV_NAME" id="ACTV_NAME"></td>
                        <td data-ng-bind="base.PARENT_UIC_KEY" id="PARENT_UIC_KEY"></td>
                        <td data-ng-bind="base.PARENT_UIC" id="PARENT_UIC"></td>
                        <td data-ng-bind="base.SMC_Region_ID" id="SMC_Region_ID"></td>
                        <td data-ng-bind="base.REGION_UIC" id="REGION_UIC"></td>
                        <td data-ng-bind="base.REGION_UIC_KEY" id="REGION_UIC_KEY"></td>
                        <td data-ng-bind="base.REGION_NAME" id="REGION_NAME"></td>
                        <td data-ng-bind="base.HQ_NAME" id="HQ_NAME"></td>
                        <td data-ng-bind="base.HQ_UIC" id="HQ_UIC"></td>
                        <td data-ng-bind="base.HQ_UIC_KEY" id="HQ_UIC_KEY"></td>
                        <td data-ng-bind="base.BASE_CMD_IND" id="BASE_CMD_IND"></td>
                        <td data-ng-bind="base.NOSC_IND" id="UICNOSC_IND_KEY"></td>
                        <td data-ng-bind="base.USER_NAME" id="USER_NAME"></td>
                        <td data-ng-bind="base.UPDATED_DT" id="UPDATED_DT"></td>
                        <td data-ng-bind="base.JOB_LOG_ID" id="JOB_LOG_ID"></td>
                        <td data-ng-bind="base.CREATED_DT" id="CREATED_DT"></td>
                        <td data-ng-bind="base.PARENT_NAME" id="PARENT_NAME"></td>
                        <td data-ng-bind="base.INSTALLATION_UIC" id="INSTALLATION_UIC"></td>
                        <td data-ng-bind="base.INSTALLATION_NAME" id="INSTALLATION_NAME"></td>
                        <td data-ng-bind="base.INSTALLATION_UIC_KEY" id="INSTALLATION_UIC_KEY"></td>
                        <td data-ng-bind="base.SMC_INSTALLATION_UIC_KEY" id="SMC_INSTALLATION_UIC_KEY"></td>
                        <td data-ng-bind="base.SMC_INSTALLATION_UIC" id="SMC_INSTALLATION_UIC"></td>
                        <td data-ng-bind="base.SMC_INSTALLATION_NAME" id="SMC_INSTALLATION_NAME"></td>
                        <td data-ng-bind="base.BASE_CMD_SC_NAME" id="BASE_CMD_SC_NAME"></td>
                        <td data-ng-bind="base.INSTALLATION_MAP_COORDINATES" id="INSTALLATION_MAP_COORDINATES"></td>
                        <td data-ng-bind="base.Closed_Ind" id="Closed_Ind"></td>
                        <td data-ng-bind="base.Joint_Base_Ind" id="Joint_Base_Ind"></td>
                        <td data-ng-bind="base.Service_ID" id="Service_ID"></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <uib-pagination total-items="UICS.length" ng-model="pager.currentPage" max-size="pager.maxSize"
            items-per-page="pager.itemsPerPage" boundary-links="true" rotate="false" previous-text="&lsaquo;"
            next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></uib-pagination>
        <div data-ng-show="false" data-ng-include="'/_layouts/15/Project3/styles/Entry.html'"></div>
    </div>
</div>

我真的不知道这个错误意味着什么或如何解决它。我在 StackOverflow 上检查了许多类似的问题，但没有找到一致的解决方案或专门适合我并允许我使用 Angular UI Bootstrap 的分页指令的答案。

Answer 1

检查此问题的答案:ui-bootstrap-tpls failed to load template

尝试包含 ui.bootstrap 的 tpls 版本

src="assets/bower_components/angular-bootstrap/ui-bootstrap-tpls.js"