Angular JS，UI-Bootstrap 无法加载模板

debugcn 发表于 Dev

索纳莫

我正在尝试为我的项目使用 UI 引导模式。但是我在加载模板时遇到问题。我看到很多帖子说我必须包含名为 ui-bootstrap-tpls.js 的正确脚本文件，但是，我想我可能有不同的问题，我找不到解决方案。

以下是错误信息

angular.js:12701 GET http://localhost:63342/project/app/uib/template/modal/window.html 404 (Not Found)

angular.js:14642 Error: [$compile:tpload] http://errors.angularjs.org/1.6.5/$compile/tpload?p0=uib%2Ftemplate%2Fmodal%2Fwindow.html&p1=404&p2=Not%20Found
    at angular.js:88
    at angular.js:20203
    at angular.js:17000
    at m.$digest (angular.js:18182)
    at m.$apply (angular.js:18480)
    at l (angular.js:12501)
    at XMLHttpRequest.s.onload (angular.js:12655)
(anonymous) @ angular.js:14642
(anonymous) @ angular.js:11102
(anonymous) @ angular.js:20207
(anonymous) @ angular.js:17000
$digest @ angular.js:18182
$apply @ angular.js:18480
l @ angular.js:12501
s.onload @ angular.js:12655

angular.js:14642 Error: [$compile:tpload] http://errors.angularjs.org/1.6.5/$compile/tpload?p0=uib%2Ftemplate%2Fmodal%2Fwindow.html&p1=404&p2=Not%20Found
    at angular.js:88
    at angular.js:20203
    at angular.js:17000
    at m.$digest (angular.js:18182)
    at m.$apply (angular.js:18480)
    at l (angular.js:12501)
    at XMLHttpRequest.s.onload (angular.js:12655)

这是我的代码。

应用程序.js

var myApp = angular.module(
    'myApp', 
    ['agGrid','ngMaterial','ngMessages','ui.bootstrap']
);

index.html（此脚本在 angular.js 加载之后和 mainController.js 加载之前

<script src="../node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js">
</script>

主控制器.js

myApp.controller('mainController',
    function mainController ($scope, $uibModal, $document) {

function myRowClickedHandler(event) {

        var modalInstance = $uibModal.open(
            {

                animation: true,
                ariaLabelledBy: 'modal-title',
                ariaDescribedBy: 'modal-body',
                templateUrl: '../app/myModalContent.html',
                controller: 'ModalInstanceCtrl',
                controllerAs: '$ctrl',
                resolve: {
                    items: function () {
                        return $ctrl.items;
                    }
                }
            });
    }
}

阿拉木图

https://plnkr.co/edit/?p=preview

https://angular-ui.github.io/bootstrap/

请参考这个。您还需要添加这些依赖项。请参考标准plunker链接

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。