AngularJS如何使用ng-bind-html指令？用法实例

最新推荐文章于 2021-06-21 19:28:13 发布

扯线木偶人

最新推荐文章于 2021-06-21 19:28:13 发布

阅读量540

点赞数

分类专栏：前端 javascript 文章标签： javascript html angular

本文链接：https://blog.csdn.net/u014240783/article/details/115271405

版权

前端同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

javascript

13 篇文章 0 订阅

订阅专栏

ng-bind-html指令AngularJS中的Java语言用于将HTML元素的innerHTML绑定到应用程序数据, 并从HTML字符串中删除危险代码。对于ng-bind-html指令, 必须使用$ sanitize服务。所有HTML元素都支持它。

语法如下：

<element ng-bind-html="expression"> Contents... </element>

例子：此示例说明了ng-bind-html指令的用法。

<!DOCTYPE html>
<html ng-app="myApp">
  
<head>
    <title>ng-bind-html Directive</title>
      
    <script src=
"//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js">
    </script>
    <script src=
"//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-sanitize.min.js">
    </script>
      
    <style>
        .green {
            color: green;
            font-size: 20px;
        }
    </style>
</head>
  
<body ng-controller="geek" style="text-align:center">
      
    <h1 style="color:green;">lsbin</h1>
    <h2 style="">ng-bind-html Directive</h2>
      
    <p ng-bind-html="text"></p>
      
    <script>
        var myApp = angular.module("myApp", ['ngSanitize']);
          
        myApp.controller("geek", ["$scope", function($scope) {
            $scope.text =
            "<span class='green'> lsbin</span> is the"
              + " computer science portal for geeks.";
        }]);
    </script>
</body>
  
</html>

输出如下：

更多前端开发相关内容请参考：lsbin - IT开发技术：https://www.lsbin.com/

参考更多AngularJS内容：

扯线木偶人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS如何使用ng-bind-html指令？用法实例

ng-bind-html指令AngularJS中的Java语言用于将HTML元素的innerHTML绑定到应用程序数据, 并从HTML字符串中删除危险代码。对于ng-bind-html指令, 必须使用$ sanitize服务。所有HTML元素都支持它。语法如下：<element ng-bind-html="expression"> Contents... </element>例子：此示例说明了ng-bind-html指令的用法。<!DOCTY
复制链接

扫一扫