angularjs深入理解向指令传递数据，双向绑定机制
<!DOCTYPE html>
<html lang="zh-CN" ng-app="app">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="../bootstrap.min.js">
</head>
<body>
<label>硬编码的input</label>
<input type="text" ng-model="Url">
<div my-directive some-attr="Url"></div> <script src="../angular.min.js"></script>
<script>
angular.module('app', [])
.directive('myDirective', function() {
return {
restrict: 'A',
replace: true,
scope: {
myUrl: '=someAttr', // 等号用做 双向绑定 这里不做详细介绍
},
template: '<div>'+
'<label>指令中的input</label>'+
'<input type="text" ng-model="myUrl">'+
'<a href="{{ myUrl }}">点我试试</a>'+
'</div>' }
})
</script>
</body>
</html>
上面是一个简单例子，这个例子我用通俗的话来过一遍
1.使用隔离作用域 让DOM中的 ng-model="Url"，这里暂且叫他'A' 与 指令中的 some-attr="Url" --> 'B' 形成双向绑定关系
scope: {
myUrl: '=someAttr',
},
经过上面的步骤，B与 隔离作用域中的model myUrl 就指向了同一个地方
2.使隔离作用域中的model myUrl -->'B' 与指令模板中的 ng-model="myUrl" -->'C' 形成双向绑定关系
template: '<div>'+
'<label>指令中的input</label>'+
'<input type="text" ng-model="myUrl">'+
'<a href="{{ myUrl }}">点我试试</a>'+
'</div>'
这个时候 A B C 就同时指向了 一个地址 所有的事情也就顺理成章了
angularjs深入理解向指令传递数据，双向绑定机制的更多相关文章
- AngularJS学习笔记（三）数据双向绑定
双向绑定 双向绑定是AngularJS最实用的功能,它节省了大量的代码,使我们专注于数据和视图,不用浪费大量的代码在Dom监听.数据同步上,关于双向更新,可看下图: 下面,我们通过代码来实现.先不要纠 ...
- 我的angularjs源码学习之旅3——脏检测与数据双向绑定
前言 为了后面描述方便,我们将保存模块的对象modules叫做模块缓存.我们跟踪的例子如下 <div ng-app="myApp" ng-controller='myCtrl ...
- AngularJS中数据双向绑定(two-way data-binding)
1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...
- 深入理解Proxy 及 使用Proxy实现vue数据双向绑定
阅读目录 1.什么是Proxy?它的作用是? 2.get(target, propKey, receiver) 3.set(target, propKey, value, receiver) 4.ha ...
- 数据双向绑定页面无反应（angularjs）
问题引入 使用 angularjs进行过一段时间的开发后,基本上都会遇到一个这样的坑:页面进行了双向数据绑定,控制层的数据也已经改变了,但是视图层的数据却没有改变. 其实造成这个问题的原因大致分为以下 ...
- 深入理解 Object.defineProperty 及实现数据双向绑定
Object.defineProperty() 和 Proxy 对象,都可以用来对数据的劫持操作.何为数据劫持呢?就是在我们访问或者修改某个对象的某个属性的时候,通过一段代码进行拦截行为,然后进行额外 ...
- 前端笔记之微信小程序（二）{{}}插值和MVVM模式&数据双向绑定&指令&API
一.双花括号{{}}插值和MVVM模式 1.1 体会{{}}插值 index.wxml的标签不是html的那些标签,这里的view就是div. {{}}这样的插值写法,叫做mustache语法.mus ...
- Jquery实现数据双向绑定（赋值和取值），类似AngularJS
<!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...
- Angular数据双向绑定
Angular数据双向绑定 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Angul ...
随机推荐
- java学习笔记(10) —— ActionContext、ServletActionContext、ServletRequestAware用法
核心思想 1.ActionContext HttpServletRequest getAttribute setAttribute ActionContext get put //ActionCont ...
- Java在ACM中的使用
1.基本框架 import java.oi.*; import java.util.* public class Main { public static void main(St ...
- CallableStatement执行存储过程
/** * 使用CablleStatement调用存储过程 * @author APPle * */ public class Demo1 { /** * 调用带有输入参数的存储过程 * CALL p ...
- 生产环境搭建MySQL复制的教程（转）
[导读] 网络上有很多关于MySQL复制搭建的步骤和范例,以及手册上有一章完整的篇幅,讲述MySQL复制的原理.搭建步骤.优化等,但依然存在很多刚开始学习MySQL知识或者刚进入DBA行业的朋友咨询, ...
- 如何访问google
http://www.williamlong.info/archives/3983.html http://jingyan.baidu.com/article/29697b91316f2fab20de ...
- codevs 1031 质数环
题目描述 Description 一个大小为N(N<=17)的质数环是由1到N共N个自然数组成的一个数环,数环上每两个相邻的数字之和为质数.如下图是一个大小为6的质数环.为了方便描述,规定数环上 ...
- P1337 fibonacci数列（tyvj）
http://www.tyvj.cn/p/1337 时间: 1000ms / 空间: 131072KiB / Java类名: Main 描述 著名的斐波那契数列f[n]=1 ...
- C51与汇编混合编程详解
C51和汇编混合编程(1)-C语言中嵌入汇编 1.在 C文件中要嵌入汇编代码片以如下方式加入汇编代码: #pragma ASM ;Assembler Code Here #pragma ENDASM ...
- MFC关于VS内存释放的定位
全部在App中完成 1.在 App.h 头文件声明 #ifdef _DEBUGprotected: CMemoryState m_msOld, m_msNew, m_msDiff;#endi ...
- Building Web Apps with SignalR, Part 1
Building Web Apps with SignalR, Part 1 In the first installment of app-building with SignalR, learn ...