Question

我正在尝试使用modal使用以下模式代码创建自定义$ui.bootstrap：

    var modalInstance = $uibModal.open({
        animation: true,
        templateUrl: '../partials/modal/modalTemplate.html',
        controller: ['$scope', '$uibModalInstance', function ($scope, $uibModalInstance) {
            $scope.hello = "hii!";
            $scope.ok = function () {
                $uibModalInstance.close();
            };

            $scope.cancel = function () {
                $uibModalInstance.dismiss('cancel');
            };
        }],
        resolve: {
            items: function () {
                return $scope.items;
            }
        }
    });

这是模态模板：

<script type="text/ng-template">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Please wait</h3>
            </div>
            <div class="modal-body">
                <!--loader-->
                <div class="loader" ng-show="showLoader"></div>
                <h2>{{hello}}</h2>
            </div>
            <div class="modal-footer">
                <h3>footer</h3>
            </div>
        </div>
    </div>
</script>

由于角度无法找到指定的模板（路径100％正确），事情仍然失败。

GET http://localhost/partials/modal/modalTemplate.html 404 (Not Found)
(anonymous) @ angular.js:12185
sendReq @ angular.js:11947
serverRequest @ angular.js:11742
processQueue @ angular.js:16606
(anonymous) @ angular.js:16622
$eval @ angular.js:17913
$digest @ angular.js:17727
$apply @ angular.js:18021
(anonymous) @ angular.js:26495
defaultHandlerWrapper @ angular.js:3540
eventHandler @ angular.js:3528
angular.js:14110 Error: [$compile:tpload] Failed to load template: ../partials/modal/modalTemplate.html (HTTP status: 404 Not Found)
http://errors.angularjs.org/1.5.9/$compile/tpload?p0=..%2Fpartials%2Fmodal%2FmodalTemplate.html&p1=404&p2=Not%20Found
...

当我仅使用template（非 templateUrl）关键字时，没有错误和某种模式渲染，但除了路径之外没有任何内容templateUrl作为文字。这让我发疯，我读遍了stackoverflow，似乎每个人都有不同的解决方案但没有工作。请指教。

忘记提及，我使用的tpls uibootstrap版本如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.3.2/ui-bootstrap-tpls.js"></script>

编辑：我的文件夹结构如下：

templates->login (contains the js file that should render the modal)
templates->partials->modal->modalTemplate.html (the template itself)

Angular ui bootstrap无法渲染模态

0 个答案: