Angular 模态：从另一个 html 添加模板

Question

我在另一个 html 文件中有一个模态模板，但在页面加载后第一次模态 window 打开时没有内容，第二次一切正常。如何解决？

这里是 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

也许您可以在这种情况下使用 $templateCache 从另一个文件加载模板。我不知道你为什么会遇到这个问题，但这解决了我的问题。

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

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

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

}]);

你怎么看？

编辑：根据问题，@Pierre Maoui 的回答似乎更适合我。

Answer 2

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

Ui-modal 期望这里直接 HTML。

如果你需要使用 ng-template，你应该在你的 index.html 中插入 ng-template 脚本标签（或其他任何地方，但它应该加载到你的页面中）并使用 [= 打开你的模态12=] 而不是 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;
        }
      }
});

Angular 模态：从另一个 html 添加模板

Angular Modal: add template from another html

angularjs

angular-ui

bootstrap-modal

angular-ui-modal