1、ng-app: 是ng的入口,表示当前元素的所有指令都会被angular管理,让anguar认识这段代码,告诉angular要去管理下面的代码;同时angular执行这段代码的时候会在内部开辟一块空间来存储这个页面用到的数据模型。

  2、ng-init: angular执行这个指令的时候,首先会在开辟的空间里面找有没有name这个数据模型,如果没有会主动创建一个数据模型,同时会给该数据模型赋值。

  3、ng-model: angular执行这个指令的时候,首先会在创建的空间里面找name数据模型,发现有则与之主动建立一种联系(同步)。

  4、{{name}}: 是一种表达式angular发现该表达式的名字name在数据模型里面存在,会主动与之建立一种联系(同步)。

  综上当数据模型里面的值开始变化是,与之有联系(同步)的都会随之变化。

  结果图如下:

  

angular 数据双向绑定的终极奥义的更多相关文章

  1. Angular数据双向绑定

    Angular数据双向绑定 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Angul ...

  2. 自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选&多选下拉框

    先说点闲话,熟悉Angular的猿们会喜欢这个插件的. 00.本末倒置 不得不承认我是一个喜欢本末倒置的人,学生时代就喜欢先把晚交的作业先做,留着马上就要交的作业不做,然后慢悠悠做完不重要的作业,卧槽 ...

  3. angular.js 中同步视图和模型数据双向绑定,$watch $digest $apply 机制

    Angular.js 中的特性,双向绑定. 让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $ap ...

  4. 我的angularjs源码学习之旅3——脏检测与数据双向绑定

    前言 为了后面描述方便,我们将保存模块的对象modules叫做模块缓存.我们跟踪的例子如下 <div ng-app="myApp" ng-controller='myCtrl ...

  5. AngularJS中数据双向绑定(two-way data-binding)

    1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...

  6. vuejs数据双向绑定原理(get & set)

    前端的数据双向绑定指的是view(视图)和model(数据)两者之间的关系:view层是页面上展示给用户看的信息,model层一般是指通过http请求从后台返回的数据.view到model的绑定都是通 ...

  7. 原生js实现数据双向绑定

    最近接触了vue,在谈到vue等等的mvvm框架之前,先了解什么是数据双向绑定以及如何利用原生JS实现数据双向绑定 单向数据绑定 指先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HT ...

  8. 数据双向绑定页面无反应(angularjs)

    问题引入 使用 angularjs进行过一段时间的开发后,基本上都会遇到一个这样的坑:页面进行了双向数据绑定,控制层的数据也已经改变了,但是视图层的数据却没有改变. 其实造成这个问题的原因大致分为以下 ...

  9. Vue数据双向绑定探究

    前面的啰嗦话,写一点吧,或许就有点用呢 使用过vue的小伙伴都会感觉,哇,这个框架对开发者这么友好,简直都要笑出声了. 确实,使用过vue的框架做开发的人都会感觉到,以前写一大堆操作dom,bom的东 ...

随机推荐

  1. Vue学习笔记六:v-model 数据双向绑定

    目录 v-model简介和适用范围 新建HTML 所见即所得 v-model模拟简易计算器 v-model简介和适用范围 Vue的一大特点之一就是数据的双向绑定,v-model就是实现这个功能的指令, ...

  2. 当前标识没有对“C:\WINDOWS\Microsoft.NET\...”的写访问权限的解决办法

    1.需要重新注册IIS服务扩展,在开始运行中输入以下命令运行:aspnet_regiis -i 32位的Windows: --------------------------------------- ...

  3. Navicat断开连接解决办法

  4. 错误:org.springframework.jdbc.support.SQLErrorCodesFactory - SQLErrorCodes loaded

    使用spring+mybatis整合时报错:org.springframework.jdbc.support.SQLErrorCodesFactory - SQLErrorCodes loaded 错 ...

  5. linux Centos7下安装python3及pip3

    先去python官网下载python3安装包 执行命令:wget https://www.python.org/ftp/python/3.6.5/Python-3.6.5.tgz 安装zlib-dev ...

  6. map集合的常用方法

    package test; import java.util.Collection; import java.util.HashMap; import java.util.Map; import ja ...

  7. day 20 - 1 序列化模块,模块的导入

    序列化模块 首先我们来看一个序列:'sdfs45sfsgerg4454287789sfsf&*0' 序列 —— 就是字符串序列化 —— 从数据类型 --> 字符串的过程反序列化 —— 从 ...

  8. 软件测试面试必问--bug交互流程

    目前市场主要用的bug管理工具:禅道.jira.QC.bugfree等,当然也有自己公司开发的. 不过不管哪一种工具,核心交互流程都是差不多的,只是字段的名称不一样而已,参考如下两张示意图: 这是前几 ...

  9. [Kubernetes]浅谈容器网络

    Veth Pair 这部分内容主要介绍一个设备: Veth Pair . 作为一个容器,它可以声明直接使用宿主机的网络栈,即:不开启 Network Namespace .在这种情况下,这个容器启动后 ...

  10. python3简单实现支持括号的加减乘除运算

    1.首先表达式的空格. 2.循环计算最内层带括号的表达式(提取运算符出现的顺序,然后计算) 3.计算最外层的表达式输出. 刚接触python,代码不够严谨,仅实现功能.不知道如何在函数中使用运算符变量 ...