代码之家 › 专栏 › 技术社区 › Yahya Essam

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

dom string angularjs javascript

Yahya Essam · 技术社区 · 6 年前

例如:

$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>

但是没有起作用。

3 回复 | 直到 6 年前

BartoszTermena 6 年前

你需要使用 $sce :

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

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

newClass

然后是html:

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

http://plnkr.co/edit/JDEkkG9Wyg12LNXdmjDo?p=preview

Yahya Essam 6 年前

我这样解决了这个问题:
注 我将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);

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

Rameez Raja 6 年前

试试这个:

  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>

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

3 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

3 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

3 年前

jieunbi · 按日期排序数组(最新优先)

3 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

3 年前

Stradosphere · 如何防止ng bind html添加结束标记?

7 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

7 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

7 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

7 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

7 年前