angularJS開發(fā)注意事項

3. 告別令人尷尬的 {{}}

我們都知道,當(dāng)頁面還未加載完畢的時候會出現(xiàn){{ xxx }}這種尷尬的情況,通過使用ng-bind-template指令,就可以避免尷尬情況的出現(xiàn).

<p ng-bind-template="{{name}}"></p> //使用示例

4.解決ng-if,ng-show,ng-hide偶然出現(xiàn)的閃現(xiàn)的問題

(1) 將html片段抽出,通過指令引入ng-include,ng-bind-html

(2) 通過ng-cloak指令

5.控制器之間的通訊問題

(1)路由傳參

//傳遞
$state.go(path, {name:"dfdd"})
ui-sref="path({name:"dfdd"})"
//獲取
$scope.$stateParams.name

(2)通過廣播

通過子元素傳遞給父元素,然后父元素再廣播給其他子元素,注意這個廣播是很快就完成的,所以很有可能出現(xiàn)子頁面還未加載完父元素的廣播就已經(jīng)完成了,為了避免這種情況,需要父元素的廣播延遲執(zhí)行.
(這種情況有一個弊端,當(dāng)進入子頁面后再次刷新頁面,這次的廣播已經(jīng)沒有了,就會導(dǎo)致這個子頁面的數(shù)據(jù)獲取失敗了.)

(3)定義全局變量(window)

將多個控制器都需要通訊的變量定義為全局的.這樣每個控制器都可以訪問到和改寫.

(4) 緩存

sessionStorage, localStorage, cookie,瀏覽器的各種數(shù)據(jù)庫

以上方法個人比較推薦路由傳參的方式

6.$destroy的使用是必要的

var destroyWatcher = $scope.$watch(...);
//示例代碼
//$watch方法會返回一個函數(shù),這個函數(shù)用來銷毀監(jiān)聽器,我們用一個變量承接這個函數(shù),然后再destory的時候調(diào)用這個函數(shù)就可以銷毀不必要的監(jiān)聽器了.
$scope.$on("$destroy", function() {
 if (timer) { 
 $timeout.cancel(timer); 
 } 
 $scope.popover.remove();
 destroyWatcher();
}

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com