0

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

加载资源失败:服务器响应状态为 404 (Not Found) --- Cannot GET /function%20(a,b)%7Breturn%20b.templateUrl%7C%7C%22template/modal/window.html%22 %7D Uncaught TypeError: undefined is not a function --- 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。我在这里提到了同样的问题,正如其中一位所说,我也有更新的版本。任何建议都会有很大帮助谢谢。

4

2 回答 2

2

我遇到了同样的问题,最后这个答案挽救了我的一天。

确保链接到包含模板的 UI Bootstrap 库(即 ui-bootstrap-tpls.js),而不是普通的 UI Bootstrap 库(即 ui-bootstrap.js)。

<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
于 2015-08-24T15:20:22.637 回答
0

好的,这看起来像是一些加载顺序/混合不同版本或依赖项 - 问题。
然而,事实证明,这个版本的引导程序不适合使用 angular 版本(1.1.3)。
首先,是您的代码(主要部分)的工作版本,角度为 1.2.25。
我还包含在 index.html 中,版本 1.1.3 的 angular(当前已标记出来)。如果替换这两个版本,则会重现错误:

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

无论具体错误如何,我强烈建议将 Angular 升级到 1.3 版(或 1.2.25 以防 IE8 支持是必须的)。它的速度要快得多,包括更酷的功能,并利用了许多 EMCA5 和 HTML5 / CSS3 功能。
不能升级?好吧,现在是调试时间……不,您知道出了什么问题,“只是”必须找出原因。
祝你好运!

于 2014-11-10T06:34:14.737 回答