在 Angular UI Bootstrap 中打开模式时出现 404 Not Found 错误

Question

我在使用 UI Bootstrap 时遇到了一个非常奇怪的问题。即使是最简单的例子也行不通。所以这是我的情况：

我有一个使用 yeoman 插件的 Play Framework 应用程序：https://github.com/tuplejump/play-yeoman。它使用 AngularJS 和 Bootstrap。到目前为止一切正常，但是当我尝试使用来自http://angular-ui.github.io/ 的 UI Bootstrap 库打开我的第一个模式时，出现了这些奇怪的错误。我使用了来自http://angular-ui.github.io/bootstrap/#/modal 的确切代码，但不知何故它不起作用。这是打开我的模态的代码：

var modalInstance = $modal.open({
    templateUrl: 'myModalContent.html',
    controller: ModalInstanceCtrl,
    size: size,
    resolve: {
      items: function () {
        return ['item1', 'item2', 'item3'];
      }
    }
  });

并且在开发控制台中出现的错误是：

GET http://localhost:9000/ui/function%20(a,b)%7Breturn%20b.templateUrl%7C%7C%22template/modal/window.html%22%7D 404 (Not Found) angular.js:9499
Uncaught TypeError: undefined is not a function angular.js:9512

我尝试了许多类似问题的解决方案，但都没有奏效。这就是我加载 ui-boostrap 的方式：

<script src="components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>

我一直在寻找解决方案很长时间，但我没有遇到 URL 中的函数 %20(a,b)%7... 的问题，并且没有一个解决方案有效。任何帮助表示赞赏！

Answer 1

我遇到了同样的问题，似乎是版本冲突。我使用的是 Angular 1.0.8 版和 Angular Bootstrap 0.11.0。升级到 Angular 1.2.21 后，问题似乎已经解决了。

Answer 2

这是我的代码：

添加服务

.factory('ModalService', ['$modal', function($modal) {
     var modalDefaults = {
         backdrop: true,
         keyboard: true,
         modalFade: true,
         size: 'sm',
         templateUrl: 'pages/modals/transfer.html'
     };

     var modalOptions = {
         closeButtonText: 'Close',
         headerText: 'Success!',
         bodyText: 'DefaultBody'
     };

     return {
            showModal: function (customModalDefaults, customModalOptions) {
                  if (!customModalDefaults) customModalDefaults = modalDefaults;
                  if (!customModalOptions) customModalOptions = modalOptions;
                  customModalDefaults.backdrop = 'static';
                  return this.show(customModalDefaults, customModalOptions);
            },
            show:function (customModalDefaults, customModalOptions) {
                       //Create temp objects to work with since we're in a singleton service
                       var tempModalDefaults = {};
                       var tempModalOptions = {};

                       //Map angular-ui modal custom defaults to modal defaults defined in service
                       angular.extend(tempModalDefaults, modalDefaults, customModalDefaults);

                       //Map modal.html $scope custom properties to defaults defined in service
                       angular.extend(tempModalOptions, modalOptions, customModalOptions);

                       if (!tempModalDefaults.controller) {
                           tempModalDefaults.controller = function ($scope, $modalInstance) {
                               $scope.modalOptions = tempModalOptions;
                               $scope.modalOptions.ok = function (result) {
                                   $modalInstance.close(result);
                               };
                               $scope.modalOptions.close = function (result) {
                                   $modalInstance.dismiss('cancel');
                               };
                           }
                       }

                        return $modal.open(tempModalDefaults).result;
                }
     }

}]);

在控制器中，调用以获取默认模式

ModalService.showModal();

不要忘记将服务注入控制器。

编辑：添加模板代码

    <div class="modal-header">
    <h3>{{modalOptions.headerText}}</h3>
</div>
<div class="modal-body">
    <p>{{modalOptions.bodyText}}</p>
</div>
<div class="modal-footer">
    <button type="button" class="btn"
            data-ng-click="modalOptions.close()">{{modalOptions.closeButtonText}}</button>
</div>

Answer 3

您是否从 ui-bootstrap 示例的标记部分复制了模板部分？

<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
        <h3 class="modal-title">I'm a modal!</h3>
    </div>
    <div class="modal-body">
        <ul>
            <li ng-repeat="item in items">
                <a ng-click="selected.item = item">{{ item }}</a>
            </li>
        </ul>
        Selected: <b>{{ selected.item }}</b>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="ok()">OK</button>
        <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
    </div>
</script>