如何将 html 标记传递给 ui bootstrap 模态？

Question

我有很多模态源分开 htmls。

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

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

上面link和我想做的一模一样

还有@BennettAdams的回答，差不多可以帮到我，

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

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

As you already have working the the plunker you linked to, you can put the template inside a script type="text/ng-template" tag and reference the value of its id attribute in your modal config.

在此先感谢，请帮助我。 :)

Answer 1

这里的思路是用script tag的id作为modal的templateUrl。来自 docs:

Load the content of a <script> element into $templateCache, so that the template can be used by ngInclude, ngView, or directives. The type of the <script> element must be specified as text/ng-template, and a cache name for the template must be assigned through the element's id, which can then be used as a directive's 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>

如何将 html 标记传递给 ui bootstrap 模态？

How to pass html markup to ui bootstrap modal?

html

angularjs

angular-ui-bootstrap

bootstrap-modal