ng-bind指令解决页面显示{{TeacherName}}问题

最新推荐文章于 2022-12-27 09:41:20 发布
最新推荐文章于 2022-12-27 09:41:20 发布
阅读量2.5k 收藏
点赞数
分类专栏： AngularJS Angularjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xingyu0806/article/details/51586238
版权

引言

        今天调bug的时候遇到了一个问题，就是有的时候加载出来的数据没有数据的时候出现的是{{TeacherName}}，一看这个不是我在页面上绑的值吗？怎么这样就显示出来了呢……

针对这个问题，想起来了Angularjs中的单向绑定，所以本文简单介绍一下{{}}插值法和ng-bind指令的绑定方法。

Demo

        首先我们先来看一个Demo：

<span style="font-size:18px;"><!DOCTYPE html>
<html ng-app>
 <head>
     <meta charset="utf-8">
     <title>ng-bind directive</title>
 </head>
 <body ng-controller="HelloController">
 <div>
     <p>直接输出字符串字面值</p>
     Hello {{"World"}}
     <hr>
 </div>

<div>
     <p>使用占位符输出变量</p>
     Hello {{greeting}}
     <hr>
 </div>

<div>
     <p>使用ng-bind指令输出变量</p>
     Hello <span ng-bind="greeting"></span>
     <hr>
 </div>

<script src="angular-1.3.0.js"></script>
 <script>
     function HelloController($scope) {
         $scope.greeting = "World";
     }
 </script>
 </body>
 </html>
</span>

效果


分析

        从以上代码和执行效果上我们可以看出：

       1、  我们可以直接在页面上写上要输出的值，这样程序可以直接读取显示在页面上。

       2、  使用{{}}和使用ng-bind指令绑定数据都是对数据的单向绑定。

       3、  使用ng-bind指令和{{}}都是因为在controller中设置了一个变量greeting，当angularjs编译到这的时候会去找到这个变量，然后输出相应的值。

 {{}}和ng-bind指令的不同点

        两种方法其实是一样的效果，只不过Angularjs通常第一个加载的页面是index.html，当使用{{}}语法的时候，其未被渲染的模板可能会被用户看到。就是出现我在开始说的问题。所以对于这样现象，我们建议使用ng-bind方法绑定数据，这样在数据加载完成之前用户就不会看到任何内容。

总结

        许多知识都是我们在用的时候才能更好的去体会，之前虽然知道ng-bind指令和{{}}语法，但是没有深刻的体会过，直到遇到bug……看来bug才是我们成长的阶梯呀！！


大玉玉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 19
    评论
专栏目录
ANGULARJS中用NG-BIND指令实现单向绑定的例子
10-25
使用ng-bind的好处是，它不会将数据内容显示在HTML源码中，从而避免了页面加载时出现的闪烁问题（Flash of Uncompiled Template，简称FOUT），提升用户体验。ng-bind通常用于那些你不希望用户看到数据占位符的场合。...
深入理解AngularJS中的ng-bind-html指令
10-20
在AngularJS中，`ng-bind-html`指令是一个用于将数据绑定到HTML元素上的特殊方法，与`ng-bind`指令有着显著的区别。`ng-bind`通常用于将文本内容直接插入到DOM（文档对象模型）中，而`ng-bind-html`则允许你插入包含...
ng-bind和{{}}插值法
weixin_34377919的博客
02-05 122
引言         今天调bug的时候遇到了一个问题，就是有的时候加载出来的数据没有数据的时候出现的是{{TeacherName}}，一看这个不是我在页面上绑的值吗？怎么这样就显示出来了呢…… 针对这个问题，想起来了AngularJS中的单向绑定，所以本文简单介绍一下{{}}插值法和ng-bind指令的绑定方法。 Demo         首先我们先来看一个Demo： [html] view...
ng-bind
光英的记忆博客
04-10 429
尽管可以在视图中使用{{ }}模板语法(AngularJS内置的方式),我们也可以通过ng-bind指令实现同样的行为。   HTML加载含有{{ }}语法的元素后并不会立刻渲染它们,导致未渲染内容闪烁(Flash ofUnrendered Content,FOUC)。我可以用ng-bind将内容同元素绑定在一起避免FOUC。内容会被当作子文
ng-bind与{{}}取值的区别
qq_42566295的博客
07-13 1698
 {{ }} 是等页面加载完后，再取值； ng-bind 它是在页面加载的时候，是不会显示{{name}}这种变量出来； ng-bind 可以解决 ng 页面闪烁加载问题； ng-bind 只能绑定单个变量，但是 {{ }} 这种方法可以绑定多个变量。...
angularjs 指令 ng-bind
行人事，知天命
01-21 1261
ng-bind ng-bind 指令告诉 AngularJS 使用给定的变量或表达式的值来替换 HTML 元素的内容。 如果给定的变量或表达式修改了，指定替换的 HTML 元素也会修改 element ng-bind="expression">element> 或作为 CSS 类： element class="ng-bind: expression">element> ng-bi
AngularJS1 -- ng-bind
住在地球的攻城狮
08-22 239
ng-bind指令将应用程序的变量动态绑定到视图. ng-bind指令会在当前元素添加无样式类名 ng-binding.
AngularJS ng-bind-html 指令详解及实例代码
10-21
在AngularJS中，`ng-bind-html`指令是一个非常实用的功能，它允许我们将HTML字符串安全地绑定到DOM元素上，使得动态生成的HTML内容能够正确渲染。在本文中，我们将深入探讨`ng-bind-html`指令的工作原理、使用方法...
AngularJS ng-bind 指令简单实现
10-21
**AngularJS ng-bind 指令详解** 在AngularJS中，`ng-bind`是一个非常重要的指令，用于将数据模型（$scope中的变量）与HTML元素的内容进行双向绑定。这意味着当模型的值发生变化时，HTML元素的内容会自动更新，反之...
angularJS ng-bind用法
weixin_30311605的博客
07-06 120
ng-bind指令绑定控制器函数函数名()到标签里面; ng-bind是从$scope->view的单向绑定ng-modle是$scope<->view的双向绑定; 在AngularJS中显示模型中的数据有两种方式： <p>{{text}}</p> 另一种是使用基于属性的指令，叫做ng-bind： <png-bind="...
ng bind 绑定html标签,angular中的ng-bind-html指令和$sce服务
weixin_31176789的博客
06-10 323
angular js的强大之处之一就是他的数据双向绑定这一牛B功能，我们会常常用到的两个东西就是ng-bind和针对form的ng-model。但在我们的项目当中会遇到这样的情况，后台返回的数据中带有各种各样的html标签。如：$scope.currentWork.description = “hello,今天我们去哪里？”我们用ng-bind-html这样的指令来绑定，结果却不是我们想要的。是这...
angularJS1笔记-(17)-ng-bind-html指令
weixin_34309435的博客
07-04 806
angular不推荐大家在绑定数据的时候绑定html,但是如果你非要这么干也并不是不可以的。举个例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>指令</title> </head>...
angularjs 表达式与ng-bind
火星男孩的分享空间
02-24 1892
AngularJS 表达式写在双大括号内：{{ expression }}。 AngularJS 将在表达式书写的位置”输出”数据。 AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。 实例 {{ 5 + 5 }} 或 {{ firstName + ” ” + lastName }}ng-bind 指令把应用程序数据绑定到 HTML 视图。ng-b
AngularJS中ngbind指令的用法
qq_34412385的博客
06-06 836
關於 AngularJS 表達式與 ngBind 指令 (directive) 的使用技巧 时间 2013-06-04 22:13:00  The Will Will Web 原文  http://blog.miniasp.com/post/2013/06/04/AngularJS-Expression-and-ngBind-directive-tips.aspx 主题 Angula
angularJs ng-bind,ng-init,ng-bind-html,ng-bind-template区别
09-12 520
用了angularJs的对这几个指令应该并不陌生，它们之前就什么区别，可能有些人对此用法比较模糊，下面我们来一一讲解下： 1.ng-bind 作用：告诉AngularJS用给定表达式的值替换指定HTML元素的文本内容，并在该表达式的值更改时更新文本内容 注意： ng-bind不能解析html元素，它只能解析普通字符串 <body ng-controller='MyCtrl'> <div ng-bind="html"></div> <div ng-
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_
angular中刷新显示与ng-bind
岁月Ben的博客
08-06 970
{{a}} 如果应用这端代码，会在刷新速度过快出现{{a}}这个代码，如果把代码换成 就会避免这个问题的出现
AngularJs
D_tangerine的博客
12-27 444
AngularJS 是JavaScript的 一个框架。它是JavaScript 编写的一个库。是AngularJS为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。**AngularJS通过使用我们称为标识符(directives)的结构，让浏览器能够识别新的语法。**例如：1）使用双大括号{{}}语法进行数据绑定；2）使用DOM控制结构来实现迭代或者隐藏DOM片段；3） 支持表单和表单的验证；4）能将逻辑代码关联到相关的
angularJs中动态添加入口html文件的title
qq_33040483的博客
11-30 974
首先在index.html中加上 &lt;title ng-bind="title"&gt;&lt;/title&gt; 然后在需要的地方或全局加上 $rootScope.$watch('title',function(){ document.title = '我是动态的';}); 就可以了...
angularjs 1.6.9 ng-bind指令
最新发布
05-26
在 AngularJS 1.6.9 中，ng-bind 指令用于绑定 HTML 元素的 innerText 或 value 属性到表达式的值。 例如，可以使用以下代码将一个变量绑定到一个 HTML 元素的 innerText 属性： ``` <div ng-bind="myVariable"></div> ``` 在上面的代码中，变量 myVariable 的值将显示在 div 元素的 innerText 属性中，当该变量的值发生变化时，div 元素的文本也会更新。 类似地，也可以使用 ng-bind 指令将变量绑定到 input 元素的 value 属性： ``` <input type="text" ng-bind="myVariable" /> ``` 在上面的代码中，变量 myVariable 的值将显示在 input 元素的 value 属性中，当该变量的值发生变化时，input 元素的值也会更新。 需要注意的是，ng-bind 指令只能绑定表达式的值到元素的 innerText 或 value 属性中，而不能绑定 HTML 代码。如果需要绑定 HTML 代码，可以使用 ng-bind-html 指令。
评论 19
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值