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

问题描述：

我有很多模式来源在分开html s。如何将html标记传递给ui bootstrap模态？

而且我不想让每个模态的html。

在这种情况下，我怎样才能将我的模态html代码传递到ui-bootstrap？

How to pass HTML markup in UI bootstrap modal

上面的链接是什么，我想要做的完全一样。

而且有@BennettAdams的答案，它可以帮助我差不多，

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

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

正如你已经工作了，你挂plunker，你可以把模板脚本类型中=“文/ NG-模板”标签，并参考其ID属性在你的模式配置价值。

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

你也可以使用'收口html'指令 –

@AnteJablanAdamović感谢您的咨询。你能给我一些代码或更具体的信息吗？ –

答

这里的想法是使用模式的script tag作为templateUrl的ID。从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="[email protected]" data-semver="1.5.5" src="//code.angularjs.org/1.5.5/angular.min.js"></script> 
 
    <script data-require="[email protected]" data-semver="1.5.5" src="//code.angularjs.org/1.5.5/angular-animate.js"></script> 
 
    <script data-require="[email protected]" 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模态？

相关推荐