Question

我在分开的html s中有很多模态源。

我不想制作每个模态的HTML。

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

How to pass HTML markup in UI bootstrap modal

以上链接与我想要的完全相同。

@BennettAdams有答案，它几乎可以帮助我，

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

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

正如你已经使用了你所连接的弹药一样，你可以放脚本中的模板类型=“text / ng-template”标记和引用在你的模态配置中它的id属性的值。

提前致谢，请帮助我。：）

Answer 1

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

将<script>元素的内容加载到$templateCache，以便这样做该模板可由ngInclude，ngView或指令使用。类型必须将<script>元素指定为text/ng-template，并且a 必须通过元素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>

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

1 个答案: