Question

我在另一个html文件中有一个模态模板，但在页面加载后第一次打开模态窗口时没有内容，第二次就可以了。如何解决这个问题？

以下是plunker 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>

Answer 1

您不应该使用<script type="text/ng-template" id="myModalContent.html"></script>包装模板。

Ui-modal希望在这里直接使用HTML。

如果您需要使用ng-template，则应在index.html中插入ng-template脚本标记（或在其他任何地方插入，但应在页面中加载）并使用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;
        }
      }
});

Answer 2

在这种情况下，您可以使用$templateCache代替从其他文件加载模板。我不知道为什么你有这个问题，但这解决了我的问题。

也许你不是在寻找类似的东西，因为这会增加JS文件的大小，有时这个模板永远不会被使用。

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

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

}]);

您怎么看？

编辑：基于这个问题，@ Pierre Maoui回答对我来说似乎更合适。

角度模态：从另一个HTML添加模板

2 个答案: