AngularJS双向绑定和依赖反转实例详解
更新时间：2017年04月15日 17:00:18 投稿：lqh
这篇文章主要介绍了AngularJS双向绑定和依赖反转实例详解的相关资料,需要的朋友可以参考下
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>
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
相关文章
详解使用KeyValueDiffers检测Angular对象的变化
这篇文章主要为大家介绍了KeyValueDiffers检测Angular对象的变化使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
这篇文章主要为大家详细介绍了AngularJS 避繁就简的路由的相关资料，感兴趣的小伙伴们可以参考一下2016-07-07
在我们创建一个angularJS应用的时候，菜单往往往是不可或缺的元素之一。接下来通过本文给大家介绍AngularJS动态菜单操作指令，感兴趣的朋友一起学习吧2017-04-04
AngualrJs2官方方法是以@Input,@Output来实现组件间的相互传值，而且组件之间必须父子关系，下面给大家提供一个简单的方法，实现组件间的传值，不仅仅是父子组件，跨模块的组件也可以实现传值2017-05-05
这篇文章主要介绍了Angular5中调用第三方库及jQuery的添加的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
跨域请求一直是网页编程中的一个难题，在过去，绝大多数人都倾向于使用JSONP来解决这一问题。不过现在，我们可以考虑一下W3C中一项新的特性——CORS（Cross-Origin Resource Sharing）了。2016-08-08
这篇文章主要介绍了AngularJS 模块化，这里整理了详细的资料及简单实例代码，实现效果图，有需要的小伙伴可以参考下2016-09-09
这篇文章主要介绍了AngularJS创建一个上传照片的指令实例代码,需要的朋友可以参考下2018-02-02
这篇文章主要和大家一起探索模拟angular的双向绑定，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
大家都是在Reactive Extensions for Javascript诞生于几年前，随着angular2正式版的发布，它将会被更多开发者所认知。这篇文章我们来详细介绍RxJs提供的Observable对象，有需要的朋友们可以参考借鉴。2016-09-09
最新评论