一、双向绑定：

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双向绑定和依赖反转的更多相关文章

  1. vue的双向绑定和依赖收集

    在掘金上买了一个关于解读vue源码的小册,因为是付费的,所以还比较放心 在小册里看到了关于vue双向绑定和依赖收集的部分,总感觉有些怪怪的,然后就自己跟着敲了一遍. 敲完后,发现完全无法运行,  坑啊 ...

  2. Angularjs 双向绑定机制解析

    文章转自:http://www.2cto.com/kf/201408/327594.html AngularJs 的元素与模型双向绑定依赖于循环检测它们之间的值,这种做法叫做脏检测,这几天研究了一下其 ...

  3. AngularJS双向绑定，手动实施观察

    实现这样的一个需求:页面中某个地方显示某个文本框的值经过计算得到的结果,而且是文本框值每次变化显示的计算结果也跟着动态变化. 在controller中可以声明一个对象,它的一个字段用来存储初始值: $ ...

  4. 【.NET6+WPF】WPF使用prism框架+Unity IOC容器实现MVVM双向绑定和依赖注入

    前言:在C/S架构上,WPF无疑已经是"桌面一霸"了.在.NET生态环境中,很多小伙伴还在使用Winform开发C/S架构的桌面应用.但是WPF也有很多年的历史了,并且基于MVVM ...

  5. AngularJs双向绑定详解

    双向绑定的三个重要方法: $scope.$apply() $scope.$digest() $scope.$watch() 一.$scope.$watch() 我理解的$watch就是将对某个数据的监 ...

  6. AngularJs双向绑定

    模型数据(Data) 模型是从AngularJS作用域对象的属性引申的.模型中的数据可能是Javascript对象.数组或基本类型,这都不重要,重要的是,他们都属于AngularJS作用域对象. An ...

  7. 【WPF】WPF开发用户控件、用户控件属性依赖DependencyProperty实现双向绑定、以及自定义实现Command双向绑定功能演示

    前言: Wpf开发过程中,最经常使用的功能之一,就是用户控件(UserControl)了.用户控件可以用于开发用户自己的控件进行使用,甚至可以用于打造一套属于自己的UI框架.依赖属性(Dependen ...

  8. Angular系列----AngularJS入门教程05：双向绑定（转载）

    在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f ...

  9. [转载]AngularJS入门教程04：双向绑定

    在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f ...

随机推荐

  1. MyEclipse开发Rest服务入门

    MyEclipse支持Rest服务,开发起来非常方便,下面我就举一个计算机的例子: 实现功能:加.减.乘.除: 效果如下: Rest服务要点:每个服务或任何东西都有一个URI: 步骤1:创建Web S ...

  2. 【CSWS2014 Summer School】大数据下的游戏营销模式革新-邓大付

    大数据下的游戏营销模式革新 邓大付博士腾讯专家工程师 Bio:毕业于华中科技大学,现任腾讯IEG运营部数据中心技术副总监,负责腾讯游戏的数据挖掘相关工作,包括有用户画像,推荐系统,基础算法研究等.主要 ...

  3. #define中的“#”和“##”的作用

    在#define中,标准只定义了#和##两种操作: #用来把参数转换成字符串: ##则用来连接两个前后两个参数,把它们变成一个字符串.

  4. Ubuntu中iptables的使用

    (一) 设置开机启动iptables# sysv-rc-conf --level 2345 iptables on (二) iptables的基本命令 1. 列出当前iptables的策略和规则# i ...

  5. topas解析(AIX)

    topas解析   topas 的显示信息和解析 (1) topas monitor for host:localhost  topas监控的主机名称localhost tue Aug 14 14:1 ...

  6. 设置Linux-Centos6.5字符集

    登录腾讯云的服务,发现不支持中文字符.草蛋疼....  01.查看Linux当前语言 echo $LANG C    #C代表英文环境 ASCII 编码格式,通杀很多问题(乱码) 02.查看系统支持的 ...

  7. rlwrap插件,实现sqlplus上下翻页

    oracle在Linux下,sqlplus中不能上下翻,最主要我经常打错字!嘿嘿 01.下载 RPM  :http://rpmfind.net/linux/rpm2html/search.php?qu ...

  8. eclipse+cygwin+cdt搭建c/c++开发环境

    Cygwin 是一个用于 Windows 的类 UNIX shell 环境. 它由两个组件组成:一个 UNIX API 库,它模拟 UNIX 操作系统提供的许多特性:以及 Bash shell 的改写 ...

  9. Android WiFi开发

    概述 介绍Android WiFi的扫描.连接.信息.以及WiFi热点等等的实现,并用代码实现. 详细 代码下载:http://www.demodashi.com/demo/10660.html 一. ...

  10. mybatis对mysql进行分页

    Mybatis对mysql数据库分页 在generator中增加插件,下载地址http://download.csdn.net/detail/shunlongjin/6937045 <plugi ...