angularJS双向绑定和依赖反转
一、双向绑定:
UI<-->数据
数据->UI (数据改变UI跟着变)
UI->数据 (UI改变数据跟着变)
数据改变->UI改变原理:
监听数据是否改变,如果改变更新UI数据。
UI改变->数据改变原理:
<html>
<body>
<input type="text" name="name" value="" id="text1" ng_model="a">
<script>
window.onload = function(){
var a='';
var oTxt = document.getElementById('text1');
oTxt.oninput = function(){ //UI值改变数据改变
a = oTxt.value;
}
}
</script>
</body>
</html>
二、依赖注入:
函数可以自己决定需要什么数据或者多小个数据,而不是外面传什么就用什么。
2.1、调用者决定给多小个参数
<script>
function show(a,b,c){
console.log(arguments.length);
}
show(1); //调用者只给1个参数,调用者决定参数的给予。
</script>
2.2、依赖注入(依赖反转):函数要求要多小参数,就给多小。 就像show(a,b,c)要求3个参数
<script>
function show(a,b,c){
console.log(arguments.length);
}
var scope = {a:12,b:15,c:99,qq:55,i:99}; //假设是函数需要的参数
//实现依赖反转二个步骤
//1、知道show要什么参数
var str = show.toString();
str=str.split('{')[0].match(/\(.*)\/)[0].replace(/\S+/g,'');
str=str.substring(1,str.length-1);
var arr=str.split(',');
//2、给它相应值
var args=[];
for(var i=0;i<arr.length;i++){
args[i]=scope[arr[i]];
}
console.log(args);
show.apply(null,args);
</script>
angularJS双向绑定和依赖反转的更多相关文章
- vue的双向绑定和依赖收集
在掘金上买了一个关于解读vue源码的小册,因为是付费的,所以还比较放心 在小册里看到了关于vue双向绑定和依赖收集的部分,总感觉有些怪怪的,然后就自己跟着敲了一遍. 敲完后,发现完全无法运行, 坑啊 ...
- Angularjs 双向绑定机制解析
文章转自:http://www.2cto.com/kf/201408/327594.html AngularJs 的元素与模型双向绑定依赖于循环检测它们之间的值,这种做法叫做脏检测,这几天研究了一下其 ...
- AngularJS双向绑定,手动实施观察
实现这样的一个需求:页面中某个地方显示某个文本框的值经过计算得到的结果,而且是文本框值每次变化显示的计算结果也跟着动态变化. 在controller中可以声明一个对象,它的一个字段用来存储初始值: $ ...
- 【.NET6+WPF】WPF使用prism框架+Unity IOC容器实现MVVM双向绑定和依赖注入
前言:在C/S架构上,WPF无疑已经是"桌面一霸"了.在.NET生态环境中,很多小伙伴还在使用Winform开发C/S架构的桌面应用.但是WPF也有很多年的历史了,并且基于MVVM ...
- AngularJs双向绑定详解
双向绑定的三个重要方法: $scope.$apply() $scope.$digest() $scope.$watch() 一.$scope.$watch() 我理解的$watch就是将对某个数据的监 ...
- AngularJs双向绑定
模型数据(Data) 模型是从AngularJS作用域对象的属性引申的.模型中的数据可能是Javascript对象.数组或基本类型,这都不重要,重要的是,他们都属于AngularJS作用域对象. An ...
- 【WPF】WPF开发用户控件、用户控件属性依赖DependencyProperty实现双向绑定、以及自定义实现Command双向绑定功能演示
前言: Wpf开发过程中,最经常使用的功能之一,就是用户控件(UserControl)了.用户控件可以用于开发用户自己的控件进行使用,甚至可以用于打造一套属于自己的UI框架.依赖属性(Dependen ...
- Angular系列----AngularJS入门教程05:双向绑定(转载)
在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f ...
- [转载]AngularJS入门教程04:双向绑定
在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f ...
随机推荐
- POJ 1836-Alignment(DP/LIS变形)
Alignment Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 13465 Accepted: 4336 Descri ...
- python input 与raw_input函数的区别
转自:http://blog.csdn.net/sruru/article/details/7790436 以前没有深入考虑过raw_input与input函数的区别,所以一直比较困惑,今天测试之后, ...
- Discuz常见小问题-修改了模块,如何重新移动原有模块的帖子
如果还能找到这个帖子(比如用搜索关键字的方法,我们看到他现在已经在CodeSys控制器的目录下,可以点击那个CodeSys控制器的超链接看到里面所有帖子),打开这个帖子之后可以点击移动,然后选择新的目 ...
- C# 单元测试几个方法的用法
单元测试的基本方法是调用被测代码的函数,输入函数的参数值,获取返回结果,然后与预期测试结果进行比较,如果相等则认为测试通过,否则认为测试不通过. 1.Assert类的使用 Assert.Inconcl ...
- Weixin 之 微信二维码扫描下载 Apk
制作的手机 app 需要上线,生成二维码扫描进行下载,把生成好的apk挂在服务器端,将地址复制下来,通过草料二维码(http://cli.im/)生成一个二维码. 在更多中,你会看到有个app的选项, ...
- IOS 将公历日期转换为中国农历
代码方法: //日期阳历转换为农历: - (NSString *)convertDateToNongLi:(NSString *)aStrDate { NSDate *dateTemp = nil; ...
- eclipse 代码上传github 笔记
第一步 先share project 如图所示 第二步 如果所示 第三步 点击 下面的create 然后点击完成 第四步提交 第五步: 第六步:
- VB LISTBOX属性
additem 添加属性 listcount总记录数 listindex索引值 Private Sub Form_Load()List1.AddItem "广东省广州市"List1 ...
- javaweb笔记全套
Lesson 1 一.eclipse工具的使用 1. java代码的位置 1) 选择工作空间 workspace 选择一个文件夹存放程序(代码) 不要用中文和空格 2) 新建一个java 工程(Pr ...
- $watch
$watch简单使用 $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEqua ...