Wie HTML-Markup zu UI Bootstrap Modal übergeben?

Ich habe viele modale Quellen in getrennten html s.Wie HTML-Markup zu UI Bootstrap Modal übergeben?

Und ich möchte nicht jede HTML von Modals machen.

In diesem Fall, wie kann ich meinen HTML-Code von Modal in UI-Bootstrap übergeben?

How to pass HTML markup in UI bootstrap modal

Link oben ist genau das gleiche wie das, was ich tun möchte.

Und es gibt Antwort von @BennettAdams, könnte es mir fast helfen,

aber er nicht von seiner zweiten Art und Weise zu erklären hat.

Ich möchte ein Beispiel für den zweiten Weg.

Wie Sie vielleicht schon das die Plunker Sie verknüpft haben arbeiten, können Sie die Vorlage in einem Skript-Typ setzen können = „text/ng-Vorlage“ Tag und Referenz den Wert seines id-Attribut in Ihrem modalen Config .

Vielen Dank im Voraus, bitte helfen Sie mir. :)

Quelle

2017-10-18 Canet Robern

Sie auch 'bind-html' Richtlinie –

@ AnteJablanAdamović Dank für Ihre Beratung nutzen können. Können Sie mir einen Code oder genauere Informationen geben? –

Die Idee hier ist, die ID script tag als templateUrl modal zu verwenden. Von dem docs:

lädt den Inhalt eines <script> Element in $templateCache, so dass kann die Vorlage von ngInclude, ngView oder Richtlinien verwendet werden. Der Typ des <script> Element muss als text/ng-template angegeben werden, und ein Cache Namen für die Vorlage muss id, durch das Element der zugeordnet werden die dann templateUrl als eine Richtlinie der verwendet werden kann.

Arbeitsbeispiel:

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>

Quelle

2017-10-18 10:35:51

Ihr Plunder ist sehr nett und leicht zu verstehen! Ich danke dir sehr. :) –

Wie HTML-Markup zu UI Bootstrap Modal übergeben?

Antwort

Verwandte Themen