AngularJS雙向綁定和依賴反轉實例詳解
更新時間：2017年04月15日 17:00:18 投稿：lqh
這篇文章主要介紹了AngularJS雙向綁定和依賴反轉實例詳解的相關資料,需要的朋友可以參考下
AngularJS雙向綁定和依賴反轉
一、雙向綁定：
UI<-->數據
數據->UI （數據改變UI跟著變）
UI->數據 （UI改變數據跟著變）
數據改變->UI改變原理：
監(jiān)聽數據是否改變，如果改變更新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>
二、依賴注入：
函數可以自己決定需要什么數據或者多小個數據，而不是外面?zhèn)魇裁淳陀檬裁础?/p>
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
在我們創(chuàng)建一個angularJS應用的時候，菜單往往往是不可或缺的元素之一。接下來通過本文給大家介紹AngularJS動態(tài)菜單操作指令，感興趣的朋友一起學習吧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創(chuàng)建一個上傳照片的指令實例代碼
這篇文章主要介紹了AngularJS創(chuàng)建一個上傳照片的指令實例代碼,需要的朋友可以參考下2018-02-02
這篇文章主要和大家一起探索模擬angular的雙向綁定，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
大家都是在Reactive Extensions for Javascript誕生于幾年前，隨著angular2正式版的發(fā)布，它將會被更多開發(fā)者所認知。這篇文章我們來詳細介紹RxJs提供的Observable對象，有需要的朋友們可以參考借鑒。2016-09-09