angularjs中ngbind和ngbindhtml的区别

最新推荐文章于 2021-06-17 06:16:29 发布

zhu jun~

最新推荐文章于 2021-06-17 06:16:29 发布

阅读量2.8k

点赞数

文章标签： ngbind ngbindhtml 区别 angularjs

本文链接：https://blog.csdn.net/zhujun_xiaoxin/article/details/56843145

版权

ngbind是用于单向绑定的，即用于单方面展示模型中的值。通常是一个字符串。
ngbindhtml也是用来展示模型中的字符串。这是个特殊的字符串，这个字符串中包含html标签。在这里面html标签会被解释，而在ngbind中元素标记会被当做普通的字符串。

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>bind</title>
    <script type="text/javascript" src="../js/angular.min.js"></script>
    <script type="text/javascript" src="../js/angular-sanitize.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('app',['ngSanitize']);
        app.controller('MyCtrl', function($scope){
            $scope.str = '<span>aaa<strong>bbb</strong></span>';
        })
    </script>
</head>
<body ng-controller="MyCtrl">
    <div ng-bind="str"></div>
    <div ng-bind-html="str"></div>
</body>
</html>

同时，有一点需要注意的是，angularjs处于安全性的考虑，在ngbindhtml中绑定的事件是不起作用的，即不会被编译的。
如果，你想在这里面绑定事件是行不通的。那么该如何解决这个问题，我在我的另一篇博客中会讲到。

zhu jun~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs中ngbind和ngbindhtml的区别

ngbind是用于单向绑定的，即用于单方面展示模型中的值。通常是一个字符串。 ngbindhtml也是用来展示模型中的字符串。这是个特殊的字符串，这个字符串中包含html标签。在这里面html标签会被解释，而在ngbind中元素标记会被当做普通的字符串。<!DOCTYPE html><html lang="en" ng-app="app"><head> <meta charset="U
复制链接

扫一扫