angular的ng-bind 和表达式的区别

最新推荐文章于 2021-06-10 11:51:53 发布
最新推荐文章于 2021-06-10 11:51:53 发布
阅读量1.1k 收藏
点赞数
分类专栏： angularjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LPLIFE/article/details/81162973
版权

  

  效果是一样的，不同的是：如果网页没有被正常地渲染，那么表达式将原型显示出来，用户将看到代码显示在网页上，而即使网页发生错误，无法正常渲染数据，ng-bind将不会将代码显示在网页上。

如下代码，如果我们将angular.min.js文件注释掉，网页将无法识别是否是angular语法，那么我们看看表达式{{}} 和ng-bind将会如何显示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script> -->
</head>

<body>
    <div ng-app="" ng-init="person={fName:'John',lName:'Doe'}">
        <p>{{person.fName}}</p>
        <p ng-bind="person.fName"></p>
    </div>
</body>

</html>

 

 

如下图：

 

可以看到表达式{{}}被直接显示在页面上，这对用户来说不是一个很好的体验。而ng-bind则避免了这种问题。

 

 

LPLIFE
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Angular中ng-bind和ng-model的区别实例详解
11-29
本文将详细讲解`ng-bind`和`ng-model`这两个指令的区别，并通过实例进行深入解析。 首先，`ng-bind`指令用于单向数据绑定，即从控制器的 `$scope` 中的属性绑定到视图。这意味着当 `$scope` 中的属性值改变时，视图...
AngularJS ng-bind-html 指令详解及实例代码
10-21
使用`ng-bind-html`非常简单，只需要在HTML元素上添加该指令，并提供一个表达式来获取包含HTML的字符串。例如： ```html <p ng-bind-html="myText"></p> ``` 这里的`myText`是一个AngularJS作用域中的变量，它应该...
【angularjs】ng-bind
程金鹏（程利鹏）
01-18 878
在我们项目中，经常将我们的angularjs.js 文件放到html页面最下面。在这样的情况下，如果网络慢，那么在js文件未加载完成的时候，用户可能就会在页面看到一堆{{name}}等表达式。为了解决问题，我们使用ng-bind demo index.html &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;met...
AngularJS学习（二）——表达式，ng-bind,ng-app,ng-init,ng-repeat,ng-model
Paul_Huang的Footprint
05-08 3512
AngularJS的绑定： 除了用{{ }}进行绑定外，还可以使用ng-bind,比如： <script src="bower_components/angular/angular.js"> 欢迎来到 HBR {{helloTo.title}} 的世界! 输入您的名字: Hello ! angular.
AngularJS如何使用ng-bind-html指令？用法实例
u014240783的专栏
03-27 559
ng-bind-html指令AngularJS中的Java语言用于将HTML元素的innerHTML绑定到应用程序数据, 并从HTML字符串中删除危险代码。对于ng-bind-html指令, 必须使用$ sanitize服务。所有HTML元素都支持它。 语法如下： <element ng-bind-html="expression"> Contents... </element> 例子：此示例说明了ng-bind-html指令的用法。 <!DOCTY
AngularJS 关于ng-model和ng-bind还有{{}}
JackLiu16的博客
10-05 316
What's the difference between ng-model and ng-bind ng-bind has one-way data binding ($scope --&gt; view). It has a shortcut {{ val }} which displays the scope value $scope.val inserted into html wher...
angularJs ng-bind,ng-init,ng-bind-html,ng-bind-template区别
09-12 525
用了angularJs的对这几个指令应该并不陌生，它们之前就什么区别，可能有些人对此用法比较模糊，下面我们来一一讲解下： 1.ng-bind 作用：告诉AngularJS用给定表达式的值替换指定HTML元素的文本内容，并在该表达式的值更改时更新文本内容 注意： ng-bind不能解析html元素，它只能解析普通字符串 <body ng-controller='MyCtrl'> <div ng-bind="html"></div> <div ng-
ANGULARJS中用NG-BIND指令实现单向绑定的例子
10-25
在实际开发过程中，选择使用插值表达式还是ng-bind指令应根据具体需求和场景来决定。对于简单的文本绑定，插值表达式通常足够；而对于需要避免数据占位符的复杂绑定，ng-bind指令则是一个更好的选择。
AngularJS ng-bind-template 指令详解
11-22
相比使用`ng-bind`指令（只接受单个表达式），`ng-bind-template`提供了更大的灵活性。 在实际开发中，`ng-bind-template`常用于构建复杂的UI组件，例如动态生成的表格、列表或其他需要根据多个数据属性渲染的元素...
angularjs 表达式与ng-bind
火星男孩的分享空间
02-24 1905
AngularJS 表达式写在双大括号内：{{ expression }}。 AngularJS 将在表达式书写的位置”输出”数据。 AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。 实例 {{ 5 + 5 }} 或 {{ firstName + ” ” + lastName }}ng-bind 指令把应用程序数据绑定到 HTML 视图。ng-b
深入理解AngularJS中的ng-bind-html指令
10-20
ng-bind-html和ng-bind的区别就是,ng-bind把值作为字符串,和元素的内容进行绑定,但是ng-bind-html把值作为html,和元素的html进行绑定.相当于jq里面的.text()和.html()。这篇文章主要给大家深入的介绍了AngularJS中ng-bind-html指令 的相关资料,需要的朋友可以参考下。
ng-bind指令
一笑的博客
02-20 488
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>ng-bind指令</title> </head> <body ng-app ng-init="username='<h1>shit1</h1>'"> <script src="bower_
ng-bind
光英的记忆博客
04-10 433
尽管可以在视图中使用{{ }}模板语法(AngularJS内置的方式),我们也可以通过ng-bind指令实现同样的行为。   HTML加载含有{{ }}语法的元素后并不会立刻渲染它们,导致未渲染内容闪烁(Flash ofUnrendered Content,FOUC)。我可以用ng-bind将内容同元素绑定在一起避免FOUC。内容会被当作子文
Angular Js入门之ng-bind和ng-model和｛｛｝｝的区别
NINE-NINE的博客
05-18 9474
Angular Js入门之ng-bind和ng-model和｛｛｝｝的区别
ng bind 绑定html标签,angular中的ng-bind-html指令和$sce服务
weixin_31176789的博客
06-10 324
angular js的强大之处之一就是他的数据双向绑定这一牛B功能，我们会常常用到的两个东西就是ng-bind和针对form的ng-model。但在我们的项目当中会遇到这样的情况，后台返回的数据中带有各种各样的html标签。如：$scope.currentWork.description = “hello,今天我们去哪里？”我们用ng-bind-html这样的指令来绑定，结果却不是我们想要的。是这...
angular中ng-bind和ng-model的区别
深之JohnChen的专栏
03-18 7181
angular中ng-bind和ng-model的区别
ng-bind 拼接字符标签
weixin_30566149的博客
08-05 614
转载于:https://www.cnblogs.com/web-fusheng/p/7291296.html
ng-init、ng-bind、ng-model和ng-value区别
小妖666个人笔记
03-12 3732
ng-init : 初始化应用时创建变量，并给变量赋值。初始化多个变量时用分号 ; 隔开。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js...
angularjs 1.6.9 ng-bind ng-bind-html
最新发布
05-26
`ng-bind` 可以将表达式中的数据绑定到元素的文本内容中，例如： ```html <p ng-bind="message"> ``` 当 `$scope.message` 的值发生变化时，`<p>` 元素的内容会自动更新。 `ng-bind-html` 与 `ng-bind` 类似，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值