0

http://angular-ui.github.io/bootstrapにあるモーダルの例を試しています。アクションのボタンをクリックすると、ウィンドウがポップアップしたかのように画面がぼやけますが、そこには何も表示されず、モーダルを開くとコンソールに次のように表示されます

リソースの読み込みに失敗しました: サーバーはステータス 404 (Not Found) で応答しました --- 取得できません /function%20(a,b)%7Breturn%20b.templateUrl%7C%7C%22template/modal/window.html%22 %7D Uncaught 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 を読み込んでいます。ここで同じ種類の問題を参照しましたが、そのうちの1人が言ったように、更新されたバージョンもあります。どんな提案でも大いに役立ちます。

4

2 に答える 2

2

私は同じ問題に遭遇し、最終的にこの答えが私の一日を救いました。

プレーンな UI Bootstrap ライブラリ (ui-bootstrap.js) ではなく、テンプレートが含まれている UI Bootstrap ライブラリ (ui-bootstrap-tpls.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) のバージョンであることが判明しました。
まず、 Angular 1.2.25を使用したコード (主要部分) の作業バージョンを次に示します。
また、index.html には、angular のバージョン 1.1.3 (現在マークアウトされています) も含めました。2 つのバージョンを置き換えると、エラーが再現されます。

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

特定のエラーに関係なく、角度をバージョン 1.3 (または IE8 サポートが必須の場合は 1.2.25) にアップグレードすることを強くお勧めします。それははるかに高速で、はるかに優れた機能が含まれており、多くの EMCA5 および HTML5 / CSS3 機能を活用しています。
アップグレードできませんか？さて、デバッグの時間です...いいえ、何が間違っているのかわかりません。理由を「ただ」見つけなければなりません。
幸運を！

于 2014-11-10T06:34:14.737 に答える