如何將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屬性在你的模式配置價值。

在此先感謝，請幫助我。 :)

來源

2017-10-18 Canet Robern

你也可以使用'收口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>

來源

2017-10-18 10:35:51

你的運動員非常好，很容易理解！非常感謝。 :) –

如何將html標記傳遞給ui bootstrap模態？

回答

相關問題