angular js将字符串转换为HTML并在页面中预览

Question

我的String包含一些HTML标记
例如 ：

$scope.string = '<div> <span> some text </span> </div>';

我想将其转换为html元素并进行一些更改
所以我做到了：

$scope.stringAfterEdit = angular.element($scope.string).find("span").addClass('newClass');

然后我需要在编辑后将html附加到页面上。
所以我尝试了这个：

<div ng-bind-html="stringAfterEdit"></div>

但是没用。
你知道怎么做吗？
提前致谢。

Answer 1

您需要使用$sce ：

  $scope.string = '<div> <span class="newclass"> some text </span> </div>';

  $scope.trustedHtml = $sce.trustAsHtml($scope.string);

在这里，您不能从CSS添加任何类。 像newClass

然后html：

<div ng-bind-html="trustedHtml"></div>

可以使用的插件： http ://plnkr.co/edit/JDEkkG9Wyg12LNXdmjDo?p=preview

Answer 2

我通过这种方式解决了这个问题：
注意 我正在将Jquery与angularJS一起使用

$scope.string = '<div> <span> some text </span> </div>';
$scope.stringAfterEdit = angular.element($scope.string);
$scope.container = angular.element('.content');
$scope.container.append($scope.stringAfterEdit);

和HTML

<div class="content"></div>

Answer 3

尝试这个：

  var string = '<div><span> some text </span> </div>';
  var ele = angular.element(string);
  ele.find("span").addClass('newClass');
  $scope.trustedHtml = $sce.trustAsHtml(ele.html());

的HTML：

<div ng-bind-html="trustedHtml"></div>