在 $uibModal 正文中渲染 HTML

Question

我有以下 Angular UI 模态：

<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>

我想要的是用HTML标记设置msg，比如"This is a <b>text</b>"。我试过了，但是 HTML 没有呈现（模态显示标记）。这可以实现吗？

Answer 1

你必须使用 ngHtmlbind。它需要 angular-sanitize.js（您必须将 ngSanitize 添加到您的模块依赖项中）。您还必须使用 $sce.trustAsHtml 声明要渲染的 html 是安全的。例如：

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="angular.js@~1.4.3" data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js"></script>
    <script data-require="angular-sanitize@1.4.3" 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

在 $uibModal 正文中渲染 HTML

Render HTML in $uibModal body

angularjs

angular-ui

angular-ui-bootstrap