2016-05-12 3 views
0

У меня есть следующий Угловое UI Modal:

<script type="text/ng-template" id="dialogBox"> 
     <div class="modal-header"> 
      <p class="modal-title"><b>{{title}}</b></p> 
     </div> 

      {{msg}} 

     <div class="modal-footer"> 
       <button class="btn btn-primary b1" type="submit">OK</button> 
     </div> 
</script> 

То, что я хочу, чтобы установить msg с HTML-разметки, такие как "This is a <b>text</b>". Я попытался, однако HTML не отображается (модальный показывает разметку). Возможно ли это?

+0

вы пробовали ngBindHtml? https://docs.angularjs.org/api/ng/directive/ngBindHtml – panzhuli

ответ

1

Вы должны использовать ngHtmlbind. Для этого требуется angular-sanitize.js (вам нужно добавить ngSanitize в зависимости от вашего модуля). Вы также должны объявить html, который хотите визуализировать, безопасно, используя $ sce.trustAsHtml. Например:

Javascript:

(function(){ 
    'use strict'; 

    angular 
    .module('myModule', ['ngSanitize']); 

    angular 
    .module('myModule') 
    .controller('showHtmlCtrl', showHtmlCtrl); 

    showHtmlCtrl.$inject = ['$sce']; 
    function showHtmlCtrl($sce){ 
    var vm = this; 
    var html = "<p> Hello world! </p>"; 
    vm.html = $sce.trustAsHtml(html); 
    } 

})(); 

Вид:

<!DOCTYPE html> 
<html> 
    <head> 
    <script data-require="[email protected]~1.4.3" data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js"></script> 
    <script data-require="[email protected]" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-sanitize.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    </head> 
    <body ng-app="myModule" ng-controller="showHtmlCtrl as shc"> 
    <div ng-bind-html="shc.html"></div> 
    </body> 
</html> 

вы можете увидеть, что работает этот plunker

Смежные вопросы