javascript - ng-bind-html 将数据呈现为 HTML 但忽略子元素

Question

我正在研究这个基于用户输入生成 HTML 的函数，我可以使用 ng-bind-as-html 在列表项(而不是字符串版本)中将其呈现为正确的 HTML。

唯一的问题是它不呈现 span 标签，它也是 li 标签中的子元素。我是 Angular 新手，可以利用你的任何见解。

下面的代码允许我将我的函数输出为正确的 HTML，这很好，但我需要显示 span 标签，因为它允许我的用户复制文本的内容。

基本上，我可以在没有 ng-bind-html 的情况下重写并适本地呈现 span，或者我可以呈现我的 HTML 输出而不获取 span 标记。我被一个或另一个困住了，而不是两个……我想要两个。经典。

感谢您的帮助!

<li 
class="entry"
ng-repeat="entry in output track by $index"
ng-mouseenter="onEnter()"
ng-bind-html="entry">
  {{entry}}
  <span 
    class="copy"
    ng-click="copyData(entry)" 
    ng-mouseenter="onEnter()">
    {{message}}
  </span>
</li>

Answer 1

您可以创建自定义 指令 以使用 transclude 和 ng-transclude 实现此目的，如下所示。

Documentation for ng-transclude

var app = angular.module('app', []);

app.controller('TestController', ['$scope', function($scope) {
  $scope.message = 'You are welcome!';
  $scope.output = ['<h1>Hello user</h1>'];
}]);

app.directive('bindHtml', ['$sce', function($sce) {
  return {
    restrict: 'A',
    transclude: true,
    template: '<span><span ng-bind-html="html"></span><span ng-transclude></span></span>',
    link: function (scope, element, attrs) {
       scope.html = $sce.trustAsHtml(scope.$eval(attrs.bindHtml));
    }
  };
}]);

angular.bootstrap(document, ['app']);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="TestController">
<li 
class="entry"
ng-repeat="entry in output track by $index"
ng-mouseenter="onEnter()"
bind-html="entry">
  <span 
    class="copy"
    ng-click="copyData(entry)" 
    ng-mouseenter="onEnter()">
    {{message}}
  </span>
</li>
</div>