摘要:作為一個應該具有經常總結反思的習慣如果不能及時總結可能就會忘記自己踩過的很多坑然后會導致同一個坑踩很多次所以我打算把這些都記錄下來以方便是對自己的重復記憶避免無效的另一方面可以希望可以給遇到相似問題的同僚們一些收獲手動觸發(fā)臟檢查在開發(fā)過程中
作為一個coder,應該具有經常總結反思的習慣,如果不能及時總結,可能就會忘記自己踩過的很多坑,然后會導致同一個坑踩很多次,所以我打算把這些都記錄下來,以方便是對自己的重復記憶,避免無效的coding,另一方面可以希望可以給遇到相似問題的同僚們一些收獲.
1.手動觸發(fā)臟檢查在開發(fā)過程中,我們可能經常會通過js來手動更改綁定的相關數(shù)據(jù),而不是通過dom操作來改變綁定的相關數(shù)據(jù),這樣也很多情況下會導致綁定數(shù)據(jù)的視圖不能夠及時更新,這個時候就需要我們手動觸發(fā)一下臟檢查,下面我就介紹一下三種手動觸發(fā)臟檢查的方法.
(1) $apply() 方法
在需要手動觸發(fā)的地方調用 $scope.$apply(),使用該方法會觸發(fā)angular從rootScope的作用域下開始進行綁定變量值的輪詢,相比較$digest()方法比較費時.
但是這個有時這個方法會報錯.
(2) $digest() 方法
在需要手動觸發(fā)的地方調用 $scope.$digest(),使用該方法會觸發(fā)angular從scope的作用域下開始進行綁定變量值的輪詢,相比較$aplly()更合理.
(3) $timeout()方法
將操作綁定數(shù)據(jù)的邏輯寫在$timeout()方法中.
找到一種更完美的解決動態(tài)添加數(shù)據(jù)導致頁面不能及時渲染的方法,迫不及待地來分享給大家~~~
可以定義一個全局的方法.這個方法就是經過處理過的apply函數(shù),大家都叫它safeApply.上代碼了:
$rootScope.safeApply = function(fn) { var phase = this.$root.$$phase; if(phase == "$apply" || phase == "$digest") { if(fn && (typeof(fn) === "function")) { fn(); } else { this.$apply(fn); } } }
然后在需要動態(tài)添加吧的地方調用$rootScope.safeApply()即可,或者把需要動態(tài)添加的代碼作為寫進$rootScope.safeApply方法的fn參數(shù)里.
2.ng-model-options 指令這個指令在表單校驗的時候非常有用,我們可以設置什么時候出發(fā)試圖更新,這樣你就可以設置dom元素失去焦點改變后調用監(jiān)聽,從而顯示校驗的提示. ,
//使用示例
//可配置參數(shù)
{updateOn: "event"}規(guī)則指定事件發(fā)生后綁定數(shù)據(jù)
{debounce : 1000} 規(guī)定等待多少毫秒后綁定數(shù)據(jù)
{allowInvalid : true|false} 規(guī)定是否需要驗證后綁定數(shù)據(jù)
{getterSetter : true|false} 規(guī)定是否作為 getters/setters 綁定到模型
{timezone : "0100"} 規(guī)則是否使用時區(qū)
我們都知道,當頁面還未加載完畢的時候會出現(xiàn){{ xxx }}這種尷尬的情況,通過使用ng-bind-template指令,就可以避免尷尬情況的出現(xiàn).
//使用示例4.解決ng-if,ng-show,ng-hide偶然出現(xiàn)的閃現(xiàn)的問題
(1) 將html片段抽出,通過指令引入ng-include,ng-bind-html
(2) 通過ng-cloak指令
(1)路由傳參
//傳遞 $state.go(path, {name:"dfdd"}) ui-sref="path({name:"dfdd"})" //獲取 $scope.$stateParams.name
(2)通過廣播
通過子元素傳遞給父元素,然后父元素再廣播給其他子元素,注意這個廣播是很快就完成的,所以很有可能出現(xiàn)子頁面還未加載完父元素的廣播就已經完成了,為了避免這種情況,需要父元素的廣播延遲執(zhí)行.
(這種情況有一個弊端,當進入子頁面后再次刷新頁面,這次的廣播已經沒有了,就會導致這個子頁面的數(shù)據(jù)獲取失敗了.)
(3)定義全局變量(window)
將多個控制器都需要通訊的變量定義為全局的.這樣每個控制器都可以訪問到和改寫.
(4) 緩存
sessionStorage, localStorage, cookie,瀏覽器的各種數(shù)據(jù)庫
以上方法個人比較推薦路由傳參的方式
6.$destroy的使用是必要的(1)頁面離開時清除頁面的定時器
(2)頁面離開時清除頁面的監(jiān)聽器
(3)頁面離開時清除頁面的modal,popover之類的遮罩層.
var destroyWatcher = $scope.$watch(...); //示例代碼 //$watch方法會返回一個函數(shù),這個函數(shù)用來銷毀監(jiān)聽器,我們用一個變量承接這個函數(shù),然后再destory的時候調用這個函數(shù)就可以銷毀不必要的監(jiān)聽器了. $scope.$on("$destroy", function() { if (timer) { $timeout.cancel(timer); } $scope.popover.remove(); destroyWatcher(); }
就先寫到這兒了,后面會持續(xù)更新...
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/92033.html
摘要:特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 本以為自己收藏的站點多,可以很快搞定,沒想到一入匯總深似海。還有很多不足&遺漏的地方,歡迎補充。有錯誤的地方,還請斧正... 托管: welcome to git,歡迎交流,感謝star 有好友反應和斧正,會及時更新,平時業(yè)務工作時也會不定期更...
摘要:下面圍繞的這樣的目的,即左右知乎網頁上屏幕截圖功能的實現(xiàn)前端掘金背景最近注意到知乎的屏幕截圖反饋功能,感覺非常不錯。正如你期望的,文中的闖關記之垃圾回收和內存管理前端掘金題圖來源,授權基于協(xié)議。 微信小程序實戰(zhàn)學習 起手式 DEMO 仿肯德基 - 前端 - 掘金小程序?大場景? 微信小程序本質上來說就是一個 HTML 5(移動網頁) 應用,用view、scoll-view代替了div標...
摘要:前端學習資源實在是又多又廣,在這樣的一個知識的海洋里,我們像一塊海綿一樣吸收,想要快速提高效率,平時的總結不可缺少,以下總結了一些,排版自我感覺良好,推送出來,后續(xù)持續(xù)跟新中開發(fā)工具下載地址在線工具解析工具在線圖片壓縮在線編輯手冊在線進制轉 前端學習資源實在是又多又廣,在這樣的一個知識的海洋里,我們像一塊海綿一樣吸收,想要快速提高效率,平時的總結不可缺少,以下總結了一些,排版自我感覺良...
閱讀 2668·2019-08-30 15:53
閱讀 2881·2019-08-29 16:20
閱讀 1088·2019-08-29 15:10
閱讀 1029·2019-08-26 10:58
閱讀 2200·2019-08-26 10:49
閱讀 640·2019-08-26 10:21
閱讀 709·2019-08-23 18:30
閱讀 1641·2019-08-23 15:58