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

【问题标题】：ng-bind-html renders data as HTML but ignores children elementsng-bind-html 将数据呈现为 HTML 但忽略子元素
【发布时间】：2016-11-25 04:09:47
【问题描述】：

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

唯一的问题是它不会渲染 li 标签中的子元素 span 标签。我是 Angular n00b，可以使用您获得的任何见解。

下面的代码允许我将函数输出为正确的 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>

【问题讨论】：

还没看到下面的答案吗？

标签： javascript html css angularjs ng-bind-html

【解决方案1】：

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

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>

【讨论】：