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>