angular 数据绑定之[]和{{}}的区别

问题描述

在学习angular时，在示例代码写到加载图片时，书中推荐使用单向数据绑定符号[]来绑定图片的路径，然后双花括号的写法是错的。

尝试

首先，按书中推荐的写法：

<img [src]="imgUrl" />

这里就省略了控制器中定义变量的代码。

然后又按书中说错误的方式进行尝试：

<img src="{{ imgUrl }}" />

最后的测试结果发现两种写法都可以正常加载图片，并没有出现将{{ imgUrl }}解析成字符串的问题。

重读

发现没有达到预期的效果，所以就又重新看了一下书中是怎么说的：

如果浏览器在Angular运行起来之前就加载了这段模板，就会尝试以字符串{{ imgUrl }}为Url来加载图片，这当然会得到一个“404 Not found”错误。在Angular运行起来之前，浏览器会在页面显示一个破损的图像。

仔细读了上面的原文，发现出现错误是有条件的。那什么时候才会触发上面的错误呢？

猜测

联想到angularjs中的双花括号，与angular类似，之前在使用的时候就会出现变量没有被正常加载的问题，导致页面直接显示{{...}}的现象。当时出现这种问题是在加载缓慢，或者重复刷新。原因就是模板加载完成了，但是angularjs并没有加载完全。

所以，我就大胆猜测，当angular加载缓慢的时候，{{}}的写法就会出现问题。

（这里笔者经过几次尝试，并没有出现问题。如果有人尝试出，欢迎指正。）

两种绑定的区别

使用[]和{{}}的区别并不大，两者都是一种angular中的单向绑定实现方式，却别就是使用{{}}的形式，会将括号中的表达式解析完成后，再将结果转换成字符串。而[]不会转换成字符串。

总结

有些问题可能以我们目前的水平并不能很好的解释，但是做出一个令自己信服的猜测还是很容易的。哪怕这个猜测在未来的某一天被证实是错误的，那只会是你新的积累的开始。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • AngularJS1.X学习笔记2-数据绑定详解

    AngularJS1.X学习笔记2-数据绑定详解

    上一篇从整体上认识了Angular,从现在开始更加深入的学习Angular的特性.本次学习的是数据绑定.应该所有的MVC框架都会用到数据绑定,比如我所知道的ThinkPHP.struts等,只有实现了数据绑定才能将模型层和视图层分离,实现MVC.Angular的数据绑定比较特别,它支持双向数据绑定. 1.ng-bind <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> &

  • Angularjs中数据绑定的实例详解

    Angularjs中数据绑定的实例详解 这是一个最简单的angularjs的例子,关于数据绑定的,大家可以执行一下,看看效果 <html ng-app> <head> <title>angularjs-include</title> <script type="text/javascript" src="js/angular/angular.min.js"></script> </head

  • 详解Angularjs 自定义指令中的数据绑定

    有关自定义指令的scope参数,网上很多文章都在讲这3种绑定方式实现的效果是什么,但几乎没有人讲到底怎么使用,本篇希望聊聊 到底怎么用 这个话题. 一. 自定义指令 自定义指令,是 Angularjs 用来实现组件化的方式,相比于 React 和 Vue 的组件化方式,它真的很复杂,自定义指令太重了,它暴露了太多可供定制的参数,以至于普通的开发者完全不知道要用它来做什么而将其束之高阁,毕竟一般的业务逻辑通过controller和service就已经可以完成了. 自定义指令在 Angularjs

  • Angular数据绑定机制原理

    Angular数据绑定机制原理

    1.Angular.js扩展浏览器的事件循环 浏览器持续等待例如用户交互这样的事件.当你在一个<input>标签里输入字符之后,这个事件的回调函数在JS解释器中执行了其包含的DOM操作,执行完毕后,浏览器响应地对DOM做出了变化.Angular拓展了这个事件循环,使它有时候成为angular context 的执行环境. 2.$watch list $watch 可以检测model的变化.每当绑定一个数据到view上的时候,$watch队列就会插入一条对应的$watch.例子如下: contr

  • Angular 2.0+ 的数据绑定的实现示例

    这两天学习了Angular感觉 数据绑定这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 前言 我们使用如下的组件代码进行本文的所有演示 export class AppComponent { angularLogo = 'https://angular.io/assets/images/logos/angular/angular.svg'; userName="David"; newItem() { console.log("Hello world!"

  • Angular2数据绑定详解

    Angular2数据绑定详解

    大致介绍 Angular2中数据绑定的方式默认是以单向方式,数据绑定的方式可以分为: 1.属性绑定和插值表达式 组件类-> 模板 2.事件绑定:模板 -> 组件类 3.双向绑定: 模板 <-> 组件类 事件绑定 事件绑定是把模板中的事件绑定到组件类中的方法上,例如在一个组件中的HTML代码是: <p> <a (click)="doClick($event)">点我</a> </p> (click)表示要进行的操作,

  • angularjs 的数据绑定实现原理

    在angularjs1.X 中存在了三种数据绑定的方式,用于数据的同步.展示.在 angularjs 1.3 之前,angularjs 只存在两种方式: two-way-binding 和 one-way-bindng , 而后则引入了称为one-time-binding 的绑定机制. 目前angularjs 中存在以下三种数据绑定方式: two-way-binding one-way-binding one-time-binding two-way-binding angularjs 中的 T

  • Angular自定义组件实现数据双向数据绑定的实例

    学过Angular的同学都知道,输入框通过[(ngModel)]实现双向数据绑定,那么自定义组件能不能实现双向数据绑定呢?答案是肯定的. Angular中,我们常常需要通过方括号[]和圆括号()实现组件间的交互: 那么在[]和()的基础上,如何实现组件的双向数据绑定? 例子如下. 子组件: <!--testDataBinding.component.html--> <h1>childStatus: {{childStatus}}</h1> //testDataBindi

  • 浅谈AngularJs 双向绑定原理(数据绑定机制)

    那么什么是双向绑定,下面简单进行讲解. 首先我们要理解数据绑定.我们看到的网站页面中,是由数据和设计两部分组合而成.将设计转换成浏览器能理解的语言,便是html和css主要做的工作.而将数据显示在页面上,并且有一定的交互效果(比如点击等用户操作及对应的页面反应)则是js主要完成的工作.很多时候我们不可能每次更新数据便刷新页面(get请求),而是通过向后端请求相关数据,并通过无刷新加载的方式进行更新页面(post请求).那么数据进行更新后,页面上相应的位置也能自动做出对应的修改,便是数据绑定. 在

  • Angular2学习笔记之数据绑定的示例代码

    Angular2学习笔记之数据绑定的示例代码

    简介 使用插值表达式将一个表达式的值显示在模版上 <img src="{{imgUrl}}" alt=""> <h1>{{productTitle}}</h1> 使用方括号将HTML标签的一个属性值绑定到一个表达式上 <img [src]="imgUrl" alt=""> 使用小括号将组件控制器的一个方法绑定到模版上面的一个事件的处理器上 <button (click)=&

随机推荐