5

私は別のhtmlファイルにモーダルテンプレートを持っていますが、ページが最初にロードされた後、コンテンツなしでモーダルウィンドウが開き、2回目はすべて問題ありません。これはどのように修正できますか？

これがプランカーですhttp://plnkr.co/edit/lw056nAaU7BfqIVZSddb?p=preview

//Open modal on main page with:
<div ng-controller="ModalDemoCtrl">
<button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
<button type="button" class="btn btn-default" ng-click="open('lg')">Large modal</button>
<button type="button" class="btn btn-default" ng-click="open('sm')">Small modal</button>
<button type="button" class="btn btn-default" ng-click="toggleAnimation()">Toggle Animation ({{ animationsEnabled }})</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>

4

2 に答える 2

5

テンプレートを でラップしないでください<script type="text/ng-template" id="myModalContent.html"></script>。

Ui-modal はここで直接 HTML を想定しています。

ng-template を使用する必要がある場合は、ng-template スクリプト タグを index.html (またはページにロードする必要がある他の場所) に挿入し、次の方法ではtemplateなくモーダルを開く必要があります。templateUrl

var modalInstance = $uibModal.open({
      animation: $scope.animationsEnabled,
      template: "<div ng-include src=\"'myModalContent.html'\"></div>",
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
});
于 2016-04-15T08:44:08.953 に答える
0

$templateCacheこの場合、代わりに別のファイルからテンプレートをロードするために使用できます。なぜこの問題が発生したのかわかりませんが、これで問題は解決しました。

JS ファイルのサイズが大きくなり、このテンプレートが使用されない場合があるため、そのようなものを探していない可能性があります。

angular.module('ui.bootstrap.demo').run(['$templateCache', function ($templateCache) {

    $templateCache.put('myModalContent.html',
        'Hello World'
    );

}]);

どう思いますか？

編集：@Pierre Maouiの回答は、質問に基づいて私にとってより適切なようです。

于 2016-04-15T08:41:54.403 に答える