Javascript 如何从ngModel呈现HTML标记？

我使用AngularJS将JS变量绑定到我的HTML内容，效果很好

JS

var app = angular.module("Tabs", [])
  .controller("TabsController", ['$scope', function($scope){
    $scope.events = my_JS_object;
  })

HTML

<div>{{events.test}}</div>

{{events.test}

---

只要

my_JS_object，它就可以工作。test

是一个简单的字符串，就像

“Hello World”

，但一旦我尝试将HTML标记放在其中，比如

Hello World

，它就不会将标记用作HTML元素，而是用作简单的文本。这是有道理的，只是我不知道如何使HTML标记工作。

您需要使用

ngBindHtml

指令正确计算表达式并以安全的方式将结果HTML插入元素。为此，必须在HTML中包含对

angular sanitize.js

的引用，然后在angular模块中，插入

ngSanitize

像这样

  var app = angular.module("Tabs", ['ngSanitize'])
     .controller("TabsController", ['$scope', function($scope){
        $scope.events = my_JS_object;
  })

 <div ng-controller="TabsController">
  <div ng-bind-html="events.test"></div>
 </div>

var-app=angular.module（“选项卡”，['ngSanitize']））
.controller（“TabsController”、[“$scope”、函数（$scope）{
$scope.events=my_JS_对象；
})

下面是一个完整的工作示例：

（函数（角度）{
"严格使用",；
angular.module（'bindHtmlExample'，['ngSanitize']））
.controller（'ExampleController'，['$scope'，function$scope）{
$scope.myHTML='Hello This is BOLD'；
}]);
})（窗口角度）；

如果您想在页面中插入HTML，不应该这样做。 这项任务有很多困难。 例如，在控制器中：

$scope.trustedHtml = "<b>Hello World</b>"

$scope.trustedHtml=“你好，世界”

在您的html中：

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

如果在插入之前使用用户给定的文本，请始终检查html。

---

另外，不要忘记在创建控制器时添加ngSanitize作为依赖项，如Angular文档所述，您可以使用内置ng bind html指令评估模型字符串并将生成的html插入元素中

例如： 如果模型值如下所示：

$scope.myHTML =
 'I am an <code>HTML</code>string with ' +
 '<a href="#">links!</a> and other <em>stuff</em>';

使用ng绑定html如：

<p ng-bind-html="myHTML"></p>

有关详细信息，请浏览：

---

注意：别忘了在你的应用程序中注入ngSanitize服务。

如果你想将自定义HTML嵌入到DOM树中，使用转换会更容易

angular.module（'myApp'，[]）
.controller（'MainCtrl'，函数（$scope）{
$scope.overwrite=false；
$scope.origin='父控制器'；
})
.directive（'myDirective'，function（）{
返回{
限制：'E'，
templateUrl:'my directive.html'，
作用域：{}，
是的，
链接：功能（范围）{
scope.overwrite=！！scope.origin；
scope.origin='链接函数'；
}
};
})；

HTML模板

来自{{origin}的作用域

覆盖？{{overwrite}


指令模板

来自{{origin}的作用域

覆盖？{{overwrite}

比使用

ng bind html

指令更简单！？为了编写代码的简单性，ng bind html更快、更容易理解。我个人的偏好可能是希望管理模板中的所有html块而不是控制器中的所有html块。