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>

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

3 个答案: