Question

我正在尝试http://angular-ui.github.io/bootstrap中给出的模态示例。当我点击按钮进行操作时，我的屏幕变得模糊，好像有一个窗口弹出，但我看不到任何东西，当我打开模态时控制台说这个

无法加载资源：服务器响应状态为404（未找到）---无法GET /function%20(a,b)%7Breturn%20b.templateUrl%7C%7C%22template/modal/window。 HTML％22％7D 未捕获的TypeError：undefined不是函数--- angular.min.js

我的控制器

'use strict'
var LoginCtrl = ['$scope', '$modal', '$log', function($scope, $modal, $log) {
  $scope.items = ['item1', 'item2', 'item3'];
  $scope.open = function (size) {

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

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };
}];

var ModalInstanceCtrl = ['$scope', '$modalInstance', 'items', function($scope, $modalInstance, items){
    $scope.items = items;
    $scope.selected = {
      item: $scope.items[0]
    };

    $scope.ok = function () {
      $modalInstance.close($scope.selected.item);
    };

    $scope.cancel = function () {
      $modalInstance.dismiss('cancel');
    };
}];

我的模板

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

        <button ng-click="open()">Open me!</button>
        <button ng-click="open('lg')">Large modal</button>
        <button ng-click="open('sm')">Small modal</button>
        <div ng-show="selected">Selection from a modal: {{ selected }}</div>
    </div>

为什么我看到这个奇怪的错误。我正在加载版本0.11.2的ui-bootstrap-tpls.min.js和版本1.3.1的angular.min.js.我提到了同样的问题here，正如其中一个问题我也提到了更新版本。任何建议都将是一个很大的帮助，谢谢。

Answer 1

我遇到了同样的问题，最后这个answer节省了我的一天。

确保使用包含的模板（即ui-bootstrap-tpls.js）链接到UI Bootstrap库，而不是普通的UI Bootstrap库（即ui-bootstrap.js）。

<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>

Answer 2

好的，这看起来像一些加载顺序/混合不同的版本或依赖 - 问题。
然而，事实证明它是角度（1.1.3）的版本，这个版本的bootstrap不能很好用。
首先，Here是代码的工作版本（主要部分），角度为1.2.25。
我还包括index.html，版本1.1.3的角度（目前标记出来）。如果替换这两个版本，错误将重现：

<!-- <script src="https://code.angularjs.org/1.1.3/angular.min.js"></script> -->

无论具体错误如何，我强烈建议将角度升级到版本1.3（或者必须使用IE8支持1.2.25）。它速度更快，包含更多酷炫功能，并利用了许多EMCA5和HTML5 / CSS3功能无法升级？那是调试时间......不知道出了什么问题，“只是”必须找到原因祝你好运！

以角度打开模态时出错

2 个答案: