AngularJS雙向綁定和依賴反轉(zhuǎn)實例詳解
AngularJS雙向綁定和依賴反轉(zhuǎn)
一、雙向綁定:
UI<-->數(shù)據(jù)
數(shù)據(jù)->UI (數(shù)據(jù)改變UI跟著變)
UI->數(shù)據(jù) (UI改變數(shù)據(jù)跟著變)
數(shù)據(jù)改變->UI改變原理:
監(jiān)聽數(shù)據(jù)是否改變,如果改變更新UI數(shù)據(jù)。
UI改變->數(shù)據(jù)改變原理:
<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值改變數(shù)據(jù)改變 a = oTxt.value; } } </script> </body> </html>
二、依賴注入:
函數(shù)可以自己決定需要什么數(shù)據(jù)或者多小個數(shù)據(jù),而不是外面?zhèn)魇裁淳陀檬裁础?/p>
2.1、調(diào)用者決定給多小個參數(shù)
<script> function show(a,b,c){ console.log(arguments.length); } show(1); //調(diào)用者只給1個參數(shù),調(diào)用者決定參數(shù)的給予。 </script>
2.2、依賴注入(依賴反轉(zhuǎn)):函數(shù)要求要多小參數(shù),就給多小。 就像show(a,b,c)要求3個參數(shù)
<script> function show(a,b,c){ console.log(arguments.length); } var scope = {a:12,b:15,c:99,qq:55,i:99}; //假設(shè)是函數(shù)需要的參數(shù) //實現(xiàn)依賴反轉(zhuǎn)二個步驟 //1、知道show要什么參數(shù) 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、給它相應(yīng)值 var args=[]; for(var i=0;i<arr.length;i++){ args[i]=scope[arr[i]]; } console.log(args); show.apply(null,args); </script>
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
- 詳解Vue.js之視圖和數(shù)據(jù)的雙向綁定(v-model)
- JS數(shù)據(jù)雙向綁定原理與用法實例分析
- Nuxt.js 數(shù)據(jù)雙向綁定的實現(xiàn)
- Vue.js單向綁定和雙向綁定實例分析
- Vue.js 踩坑記之雙向綁定
- js最簡單的雙向綁定實例講解
- JS原生數(shù)據(jù)雙向綁定實現(xiàn)代碼
- jquery,js簡單實現(xiàn)類似Angular.js雙向綁定
- 使用Object.defineProperty實現(xiàn)簡單的js雙向綁定
- 輕松實現(xiàn)javascript數(shù)據(jù)雙向綁定
- js實現(xiàn)視圖和數(shù)據(jù)雙向綁定的方法分析
相關(guān)文章
angularjs ocLazyLoad分步加載js文件實例
本篇文章主要介紹了angularjs ocLazyLoad分步加載js文件,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-01-01angularJS Provider、factory、service詳解及實例代碼
這篇文章主要介紹了angularJS Provider詳解及實例代碼的相關(guān)資料,需要的朋友可以參考下2016-09-09Angular中Lazy Loading懶加載陷阱避坑最佳實踐
這篇文章主要為大家介紹了Angular中Lazy Loading懶加載陷阱避坑最佳實踐,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10angular4 如何在全局設(shè)置路由跳轉(zhuǎn)動畫的方法
本篇文章主要介紹了angular4 如何在全局設(shè)置路由跳轉(zhuǎn)動畫的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-08-08angular+ionic 的app上拉加載更新數(shù)據(jù)實現(xiàn)方法
這篇文章主要介紹了angular+ionic 的app上拉加載更新數(shù)據(jù)實現(xiàn)方法,需要的的朋友參考下2017-01-01用Angular實時獲取本地Localstorage數(shù)據(jù),實現(xiàn)一個模擬后臺數(shù)據(jù)登入的效果
這篇文章主要介紹了用ANGULAR實時獲取本地LOCALSTORAGE數(shù)據(jù),實現(xiàn)一個模擬后臺數(shù)據(jù)登入的效果的相關(guān)資料,非常不錯具有參考借鑒價值,需要的朋友可以參考下2016-11-11Angular實現(xiàn)點擊按鈕控制隱藏和顯示功能示例
這篇文章主要介紹了Angular實現(xiàn)點擊按鈕控制隱藏和顯示功能,結(jié)合實例形式分析了AngularJS簡單控制頁面元素顯示與隱藏的相關(guān)操作技巧,需要的朋友可以參考下2017-12-12