如何将html标记传递给ui bootstrap modal？答案

【问题标题】：How to pass html markup to ui bootstrap modal?如何将html标记传递给ui bootstrap modal？
【发布时间】：2018-03-30 04:00:39
【问题描述】：

我在分开的htmls 中有许多模态来源。

而且我不想制作每个 html 的模态框。

在这种情况下，如何将模态的 html 代码传递到 ui-bootstrap？

How to pass HTML markup in UI bootstrap modal

上面的链接和我想做的完全一样。

还有@BennettAdams 的回答，几乎可以帮到我，

但他没有解释他的第二种方式。

我想要一些第二种方式的例子。

由于您已经在使用链接到的 plunker，因此您可以将脚本 type="text/ng-template" 标记和参考中的模板模式配置中其 id 属性的值。

提前谢谢，请帮助我。 :)

【问题讨论】：

你也可以使用bind-html指令
@AnteJablanAdamović 感谢您的建议。你能给我一些代码或更具体的信息吗？

标签： html angularjs angular-ui-bootstrap bootstrap-modal

【解决方案1】：

这里的想法是使用script tag的id作为modal的templateUrl。来自docs：

将<script>元素的内容加载到$templateCache中，这样模板可由ngInclude、ngView 或指令使用。方式的<script> 元素必须指定为text/ng-template，并且模板的缓存名称必须通过元素的id 分配，然后可以将其用作指令的templateUrl。

工作示例：

angular.module('mydemo', ['ngAnimate', 'ui.bootstrap']);
angular.module('mydemo').controller('myCtrl', function ($scope, $uibModal, $log) {

  $scope.open = function (size) {

    var modalInstance = $uibModal.open({
      templateUrl: 'modalTemplate.html',
      controller: 'ModalInstanceCtrl',
      size: size
    });
  };
});

angular.module('mydemo').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance) {
  $scope.cancel = function () {
    $uibModalInstance.dismiss('cancel');
  };
});

<!DOCTYPE html>
<html ng-app="mydemo">

<head>
  <script data-require="angular.js@1.5.5" data-semver="1.5.5" src="//code.angularjs.org/1.5.5/angular.min.js"></script>
  <script data-require="angular-animate@1.5.5" data-semver="1.5.5" src="//code.angularjs.org/1.5.5/angular-animate.js"></script>
  <script data-require="ui-bootstrap@1.3.2" data-semver="1.3.2" src="//cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>

<body>
  <div ng-controller="myCtrl">
    <button type="button" class="btn btn-default" ng-click="open('lg')">Show modal</button>
  </div>

</body>

<script type="text/ng-template" id="modalTemplate.html"><h1>Helo from ng-template!</h1></script>
 
</html>

【讨论】：

您的 plunker 非常好用且易于理解！太感谢了。 :)