Question

var popover = '<u>Hi</u>: Some message.<br><br>' +
          '<u>New</u>: New msg.<br><br>' +
          '<u>Next</u>: Next Data.<br><br>' +
          '<u>Cancelled</u>: Remove service.<br><br>';

          $scope.data = $sce.trustAsHtml(popover);



  <th class="col-info hidden-xs text-left">Status
  <span popover-placement="bottom" popover="{{ data }}"
   popover-trigger="click"
   class="pull-right"> <i class="fa fa-info-circle"></i></span>
   </th>

//即使使用$ sce也不会读取html值。是否有任何混淆或任何其他事情请提前帮助谢谢。

Answer 1

您可以尝试使用ui.bootstrap，这样您就可以在弹出框中包含模板，因此您无需使用$sce进行编译。这是一个演示：

＆＃13;

var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('myCtrl', function($scope) {
  $scope.dynamicPopover = {
    "templateUrl": "popover.html"
  };
  /* // you can have your data stored here
  $scope.dynamicPopover.msg = "Some message.";
  $scope.dynamicPopover.new = "New msg.";
  $scope.dynamicPopover.next = "Next Data.";
  $scope.dynamicPopover.cancelled = "Remove service.";
  */
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<div ng-app="myApp" ng-controller="myCtrl">

  <button uib-popover-template="dynamicPopover.templateUrl" type="button" popover-placement="bottom-left" popover-trigger="click" class="btn btn-default">Status</button>

  <!-- Can be a separate file -->
  <script type="text/ng-template" id="popover.html">
    <u>Hi</u>: Some message.<br><br>
    <u>New</u>: New msg.<br><br>
    <u>Next</u>: Next Data.<br><br>
    <u>Cancelled</u>: Remove service.<br><br>
  </script>

</div>

＆＃13;

Answer 2

在这里，我创建了一个示例jsfiddle。请检查一下 demo

您应该在span标记中使用ng-bind-html属性

  <span ng-bind-html="data"></span>

我认为它会对你有所帮助

popover不读取html标签angularjs

2 个答案: