一、双向绑定:

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. python input 与raw_input函数的区别

    转自:http://blog.csdn.net/sruru/article/details/7790436 以前没有深入考虑过raw_input与input函数的区别,所以一直比较困惑,今天测试之后, ...

  2. Android 之 AndroidManifest.xml 详解(一)

    当Android启动一个应用程序组件之前,它必须知道哪些个组件是存在的,所以开发人员在开发过程中,必须将应用程序中出现的组件一一在AndroidManifest.xml文件中" 声明 &qu ...

  3. 队列实例程序(C语言)

    /* queue.h */ #ifndef _QUEUE_H #define _QUEUE_H struct queue_record; typedef struct queue_record *qu ...

  4. webpack 处理CSS

    1.安装插件 npm i style-loader css-loader --save-dev npm i postcss-loader --save-dev npm i autoprefixer - ...

  5. RAM调优之日志分析

    D/dalvikvm: <GC_Reason> <Amount_freed>, <Heap_stats>, <External_memory_stats> ...

  6. 错误:google-chrome-stable-44.0.2403.157-1.x86_64.rpm 的公钥没有安装

    错误:google-chrome-stable-44.0.2403.157-1.x86_64.rpm 的公钥没有安装 Fedora22 系统更新软件包.出现: warning: /var/cache/ ...

  7. 统计一个文件中出现字符'a'的次数

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #统计一个文件中出现字符'a'的次数 #http://www.cnblogs.com/hongten/p/ho ...

  8. Linux 系统sudo命令

    Linux系统中有许多的系统命令和服务为了安全性考虑,因此只有root超级用户才可以去使用.如果普通用户需要做此类操作,则可以使用su - 命令(减号(-)指完全切换到新的用户,即把环境变量信息也变更 ...

  9. OpenStack 网络:Neutron 初探

    OpenStack Neutron 网络模型 OpenStack nova-network 独立成为单独的组件 Neutron 后,形象的网络模型的多平面网络.混合平面私有网络.如图 3,图 4,图 ...

  10. 基于docker的centos:latest镜像制作nginx的镜像

    Dockerfile和nginx.repo在同一目录下 先创建nginx.repo [root@localhost nginx]# cat nginx.repo [nginx] name=nginx ...