javascript - Angular 模态未显示

Question

我正在尝试创建一个非常简单的模式，定义为:

var modelTemplate = '<div class="modal-header"><h3 class="modal-title">Test</h3></div><div class="modal-body">Selected</div><div class="modal-footer"></div>';

我将其显示为:

$scope.showAbout = function (){
    var modalInstance = $modal.open({template: modelTemplate});
}

但我收到以下错误:

XMLHttpRequest cannot load file:///home/noor/Documents/files/developlement/k7/android/WorldCup2014/template/modal/backdrop.html. Cross origin requests are only supported for HTTP. 
XMLHttpRequest cannot load file:///home/noor/Documents/files/developlement/k7/android/WorldCup2014/template/modal/window.html. Cross origin requests are only supported for HTTP. 
Error: [$compile:tpload] http://errors.angularjs.org/1.2.16/$compile/tpload?p0=template%2Fmodal%2Fbackdrop.html
Error: [$compile:tpload] http://errors.angularjs.org/1.2.16/$compile/tpload?p0=template%2Fmodal%2Fwindow.html

Answer 1

问题中没有足够的细节，所以我不能确定，但​​我认为您包含了来自 angular-ui/bootstrap 发行版的错误文件。请记住，虽然分发了多个文件，但您只需包含其中的一个即可。要包含的确切文件取决于用例，但大多数时候您希望包含 ui-bootstrap-tpls-[version].min.js。

此处描述了不同类型的分布式文件: https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files

安装说明可在此处获取: https://github.com/angular-ui/bootstrap#installation

简而言之 - 确保您包含带有嵌入模板的分发文件。如果它仍然不起作用，请发布带有实时重现场景的 plunk。