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

1 个答案: