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 ...
随机推荐
- JSP九大隐式对象
JSP九大隐式对象 request HttpServletRequest response HttpServletResponse session HttpSession application Se ...
- powerpoint无法输入中文怎么办|ppt文本框无法输入中文解决办法
powerpoint文本框无法输入中文的情况不知大家是否遇到过呢?反正小编是遇到过这样的情况的,简直是急煞人也!那么powerpoint无法输入中文时应该怎么办呢?本节内容中小编就为大家带来ppt文本 ...
- IO通信
DeviceIoControl 发送控制代码到指定设备驱动程序 参数解释: hDevice Long,设备句柄 dwIoControlCode Long,应用程序调用驱动程序的控制命令,就是IOCTL ...
- QuerryRunner Tools
package com.ydbg.gis.utils; import java.sql.SQLException; import java.util.List; import java.util.Ma ...
- 位运算反(~)与(&)异或(^)或(|)右移(>>)左移(<<)
原文:位运算反(~)与(&)异或(^)或(|)右移(>>)左移(<<) 先知道这两个二进制数据的特点: 1=0000 0000 0000 0000 0000 000 ...
- PullToRefreshListView 内嵌checkbox 数据丢失问题
在PullToRefreshListView 内部内嵌了Checkbox如下图所示: 原本设计思路是:对CheckBox 进行 setOnCheckedChangeListener 监听 当Check ...
- #翻译# 深入JavaScript的Unicode难题(上)
退一步说, JavaScript处理Unicode时有些怪异. 这篇文章会说明JS在Unicode上令人痛苦的部分, 然后提供解决方案, 并说明在未来的ECMAScript6中是如何改善这些问题的. ...
- delphi7开发webservice部属在apache服务器中 转
delphi7开发webservice部属在apache服务器中 delphi7 webservice apache 用Delphi7开发Web Service程序,并把服务程序放在apache We ...
- 黑马程序员_JavaIO流（二）
字符流的缓冲区 缓冲区的出现提高了对数据的读写效率. 对应类: BufferedWriter BufferedReader 缓冲区要结合流才可以使用. 在流的基础上对流的功能进行了增强. Buffer ...
- POJ1743---Musical Theme （后缀数组+二分）
题意 :求最长不相交重复子串的长度.. 可以先求出LCP,,对于长度 二分出答案..(竟然不会写二分) #include <set> #include <map> #inclu ...