加载模板失败：uib/template/modal/window.html（HTTP 状态 404 未找到）

Question

我已将 ui-bootstrap 添加到 angular 1.x 项目中，当我想打开模态表单时出现此错误

[$compile:tpload] Failed to load template: uib/template/modal/window.html (HTTP status: 404 Not Found)

我以前用过 ui-bootstrap 并且一直运行良好，但在我的新项目中我遇到了问题。

代码如下：

$uibModal.open(
{ backdrop: 'static', templateUrl: 'DesktopModules/' + 
  window.GLOB.moduleFolderName + '/app/form/form.html',
  controller: 'requestCtrl',
  size: 'sm',
  scope: $scope 
 });

angular 版本：v1.5.8

UIBS: v2.2.0

Bootstrap: v3.3.7

Answer 1

您缺少模态模板uib/template/modal/window.html

确保加载 ui-bootstrap-tpls.js

tpls 标签表示该文件包含模板。

供参考：

ui-bootstrap-tpls.js

angular.module("ui.bootstrap"
 ["ui.bootstrap.tpls"
 "ui.bootstrap.transition"
"ui.bootstrap.collapse"
"ui.bootstrap.accordion"
"ui.bootstrap.alert"
"ui.bootstrap.bindHtml"
"ui.bootstrap.buttons"
"ui.bootstrap.carousel"
"ui.bootstrap.position"
"ui.bootstrap.datepicker"
"ui.bootstrap.dropdownToggle"
"ui.bootstrap.modal"
"ui.bootstrap.pagination"
"ui.bootstrap.tooltip"
"ui.bootstrap.popover"
"ui.bootstrap.progressbar"
"ui.bootstrap.rating"
"ui.bootstrap.tabs"
"ui.bootstrap.timepicker"
"ui.bootstrap.typeahead"]);

angular.module("ui.bootstrap.tpls"
 ["template/accordion/accordion-group.html"
"template/accordion/accordion.html"
"template/alert/alert.html"
"template/carousel/carousel.html"
"template/carousel/slide.html"
"template/datepicker/datepicker.html"
"template/datepicker/popup.html"
"template/modal/backdrop.html"
"template/modal/window.html"   //     < ---- Your case
"template/pagination/pager.html"
"template/pagination/pagination.html"
"template/tooltip/tooltip-html-unsafe-popup.html"
"template/tooltip/tooltip-popup.html"
"template/popover/popover.html"
"template/progressbar/bar.html"
"template/progressbar/progress.html"
"template/rating/rating.html"
"template/tabs/tab.html"
"template/tabs/tabset-titles.html"
"template/tabs/tabset.html"
"template/timepicker/timepicker.html"
"template/typeahead/typeahead-match.html"
"template/typeahead/typeahead-popup.html"]);
angular.module('ui.bootstrap.transition'
 [])

Answer 2

我们已经解决了问题，我们用了 $templateCache.removeAll(); 总是有新版本的文件而不是缓存的文件，此功能会干扰加载 ui bootstrap 的模板文件。

加载模板失败：uib/template/modal/window.html（HTTP 状态 404 未找到）

Failed to load template: uib/template/modal/window.html (HTTP status 404 Not Found)

javascript

angularjs

angular-ui-bootstrap

ui-bootstrap-tpls.js