ng-bind和{{}}插值法

最新推荐文章于 2020-07-14 21:22:04 发布
最新推荐文章于 2020-07-14 21:22:04 发布
阅读量118 收藏
点赞数

引言

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

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

Demo

        首先我们先来看一个Demo：

[html] view plain copy print?在CODE上查看代码片派生到我的代码片
  1. <span style="font-size:18px;"><!DOCTYPE html>  
  2. <html ng-app>  
  3.  <head>  
  4.      <meta charset="utf-8">  
  5.      <title>ng-bind directive</title>  
  6.  </head>  
  7.  <body ng-controller="HelloController">  
  8.  <div>  
  9.      <p>直接输出字符串字面值</p>  
  10.      Hello {{"World"}}  
  11.      <hr>  
  12.  </div>  
  13.   
  14. <div>  
  15.      <p>使用占位符输出变量</p>  
  16.      Hello {{greeting}}  
  17.      <hr>  
  18.  </div>  
  19.   
  20. <div>  
  21.      <p>使用ng-bind指令输出变量</p>  
  22.      Hello <span ng-bind="greeting"></span>  
  23.      <hr>  
  24.  </div>  
  25.   
  26. <script src="angular-1.3.0.js"></script>  
  27.  <script>  
  28.      function HelloController($scope) {  
  29.          $scope.greeting = "World";  
  30.      }  
  31.  </script>  
  32.  </body>  
  33.  </html>  
  34. </span>  

 

效果


分析

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

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

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

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

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

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

总结

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

weixin_34377919
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ng-bind指令解决页面显示{{TeacherName}}问题
邢玉 傻傻的坚持，总有一天会成功！
06-04 2585
引言         今天调bug的时候遇到了一个问题，就是有的时候加载出来的数据没有数据的时候出现的是{{TeacherName}}，一看这个不是我在页面上绑的值吗？怎么这样就显示出来了呢…… 针对这个问题，想起来了Angularjs中的单向绑定，所以本文简单介绍一下{{}}插值法和ng-bind指令的绑定方法。 Demo         首先我们先来看一个Demo：
Angular中ng-bind和ng-model的区别实例详解
11-29
ng-bind和ng-model的区别 AngularJS的数据绑定有ng-bind和ng-model，一般用于如下： <input ng-model=”object.xxx”> <span ng-bind=”object.xxx”> ng-bind是单向绑定，由作用于$scope到view层，且在...
AngularJS展示数据的ng-bind指令和{{}} 区别
weixin_34273046的博客
12-07 111
在AngularJS中显示模型中的数据有两种方式：一种是使用花括号插值的方式：<p>`text`</p>另一种是使用基于属性的指令，叫做ng-bind：<png-bind="text"></p>这两种方式的效果都是一样的，其主要区别在于，使用花括号语法时，在AngularJS使用数据替换模板中的花括号时，第一个加载的页面，通常...
ng-bind与{{}}取值的区别
qq_42566295的博客
07-13 1688
 {{ }} 是等页面加载完后，再取值； ng-bind 它是在页面加载的时候，是不会显示{{name}}这种变量出来； ng-bind 可以解决 ng 页面闪烁加载问题； ng-bind 只能绑定单个变量，但是 {{ }} 这种方法可以绑定多个变量。...
ng-bind 与ng-model及ng-bind与{{}}区别:
weixin_30699465的博客
01-10 168
ng-bind 与ng-model区别:双向绑定，一般来说是这样 <input ng-model="object.xxx"> <span ng-bind="object.xxx"></span> ng-bind是从$scope -> view的单向绑定，也就是说ng-bind是相当于{{object.xxx}}，是用于展示数据的。ng-mo...
angularJS之ng-bind与{{}}取值的区别
agi52790的博客
11-19 294
1：{{ }} 是等页面加载完后，再取值。 2：ng-bind 它是在页面加载的时候，是不会显示{{name}}这种变量出来。 3：ng-bind 可以解决 ng 页面闪烁加载问题。 4：ng-bind 只能绑定单个变量，但是 {{ }} 这种方法可以绑定多个变量。 转载于:https://www.cnblogs.com/pengxiangchong/p/9981581....
深入理解AngularJS中的ng-bind-html指令
10-20
ng-bind-html和ng-bind的区别就是,ng-bind把值作为字符串,和元素的内容进行绑定,但是ng-bind-html把值作为html,和元素的html进行绑定.相当于jq里面的.text()和.html()。这篇文章主要给大家深入的介绍了AngularJS中ng...
ANGULARJS中用NG-BIND指令实现单向绑定的例子
10-25
主要介绍了ANGULARJS中用NG-BIND指令实现单向绑定的例子,本文简单介绍AngularJS框架后,用一个实例演示{{}}插值法和ng-bind指令的使用,需要的朋友可以参考下
angularjs中ng-bind-html的用法总结
10-19
主要介绍了angularjs中ng-bind-html的用法总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
angularjs中使用ng-bind-html和ng-include的实例
10-19
下面小编就为大家带来一篇angularjs中使用ng-bind-html和ng-include的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
ng-bind购物车
cdb_680的博客
11-21 177
angular.module("myapp", ["ionic"]) .controller("democ", function($scope) { //1 定义数组 $scope.goods = [{ "id": 0, "img": "img/head.jpg", "title": "标题1", "price": 100, "num": 1, "state": false  
【vue学习】—基础语法（插值操作、属性绑定、计算属性）
scj1014的博客
01-07 1020
1. 插值操作 1.1 mustache语法 mustache语法，简单来说就是{{}}语法，并且数据是响应式的 <div id="app"> //mustache语法 <h2>{{message}}</h2> </div> <script src="../js/vue.js"></script>...
Angular Js入门之ng-bind和ng-model和｛｛｝｝的区别
NINE-NINE的博客
05-18 9423
Angular Js入门之ng-bind和ng-model和｛｛｝｝的区别
AngularJS 关于ng-model和ng-bind还有{{}}
热门推荐
梦骑士的博客
03-31 1万+
What's the difference between ng-model and ng-bind ng-bind has one-way data binding ($scope --> view). It has a shortcut {{ val }} which displays the scope value $scope.val inserted into
angular 插值表达式
后台模板
02-03 3474
转载自 http://www.ngui.cc/news/show-102.html 在 Angular 中，我们可以使用 {{}} 插值语法实现数据绑定。 绑定普通文本 import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `Hello {{name}}`,
ng-model，ng-value，ng-bind，{{}}----angularJS数据绑定
zhaolisha9232的博客
02-23 5824
最典型用法 双向绑定 ng-value 用于设置 input 或 select 元素的 value 属性 input ng-value="expression">/input> ng-model  , , , 元素支持该指令。 element ng-model="name">/element> ng-b
Angular 插值绑定
Judy-命中注定与众不同
11-12 1220
前言一直在做项目没有来的及做总结，有时间不管用，也有不想去总结，因为总感觉有的地方欠缺所以懒着不去总结，发现错失了很多东西，这次分析插值绑定的基础知识，希望帮助到大家What绑定对于angular的一些基本情况我在前几篇博客中介绍过所以这次直接引入正题，angular的绑定是指模板和ts的中的数据进行绑定，如何实现那？通过ts中的代码实现,下面的代码是在ts中书写的，通过component中我们直接
03-插值操作（Mustache）与V-bind
PP_zi的博客
07-14 539
一、插值操作 1、Mustache Mustache是胡子，胡须的意思，在Vue中，通过Mustache语法（双大括号）将data中的文本数据插入到HTML中。 Mustache语法可以是简单的语句，也可以是表达式，有很多种写法。 <div id="app"> <h2>{{message}}</h2> <h2>{{message}},熊吱</h2> <h2>{{firstName + ' '
解决：angular.js中插值表达式为HTML时需要被渲染的问题
阿超的博客
04-13 2978
我最近在用angular.js重构我上学期的大程。其中一个angular插值表达式为HTML，初始表达式是这样的： <p>{{content}}</p> 但是其中的HTML没有被渲染，这导致呈现的效果是这样的： 我们可以看到，作为文章主体的HTML没有被渲染。这是因为angular插值表达式默认会表达式内容进行转义。这么做是为了：防止html注入攻击。 为了解决这个问题，需要用到新的指令: <p
angularjs 1.6.9 ng-bind ng-bind-html
最新发布
05-26
`ng-bind` 和 `ng-bind-html` 都是 AngularJS 提供的指令，用于将数据绑定到 HTML 元素中。 `ng-bind` 可以将表达式中的数据绑定到元素的文本内容中，例如： ```html <p ng-bind="message"> ``` 当 `$scope....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值