AngularJS經驗分享

jopen 9年前發布 | 12K 次閱讀 Web框架 angularjs
 

AngularJS是動感的JS框架,使用它可以使你的代碼變得簡單,特別是大型的WebApp,因為你不在去手動的去更新你的UI,你只需要關心你的數據和你應用的狀態即可。

下面是一些簡單而常用的AngularJS中遇到的一些問題,僅供大家參考

1s鐘回顧

AngularJS經驗分享

問題分享

明明改變了數據為什么沒有更新?

這種問題可能多半時沒有進入AngularJS自己的Context中去,導致無法對視圖進行更新,這個時候你可能要手動進行更新

這個你可以嘗試使用$apply或者$digest,但也不要過度濫用$digest,每次調用畢竟是要消耗很多的資源的

但有時候調用了會遇到如下的報錯

AngularJS經驗分享

不要著急,在手動調用$digest的時候,使用如下的封裝可以做到萬無一失

varupdateUI=function(){
    if(!$scope.$$phase){
      $scope.$digest();
    }
};
varupdateRootUI=function(){
    if(!$rootScope.$$phase){
      $rootScope.$digest();
    }
};

提交的數據多了那么多$$hashKey怎么辦

如下的數據

AngularJS經驗分享

原因是因為$$hashKey是AngularJS為了做DirtyCheck加的haskKey,解決這個辦法也很簡單,請使用angular.toJson發放代替JSON.stringify序列化數據

頁面加載為什么會有那么多404?

這個多半是模板里面直接使用了src,請使用ng-src替代src,這里提一下,sodaRender里請使用soda-src

<imgng-src="{{url}}.png"/>

多層循環嵌套$index重復怎么辦?

請使用track by 語法(sodaRender也支持)

<ling-repeat="item in list track by $subindex"> </li>

Directive如何使用ng-model?

自己封裝的Directive,想像ng-model一樣好用怎么辦?

請使用directive中的require配置項,將ng-model Directive引進來,并在合適的時間調用setViewValue方法

AngularJS經驗分享

ng-model不能滿足我怎么辦

有些時候,ng-model并不能滿足所有的場景需求,這個時候可以考慮使用set、get方法做一層攔截,這樣就可以更好的控制數據綁定,如下

AngularJS經驗分享

然而在1.3+的版本中,angularJS似乎也意識到了ng-model的這一點,所以它開放了API允許我們進行攔截

AngularJS經驗分享

AngularJS經驗分享

只不過,angularJS講set和get方法合二為一,這一點也是比較巧妙的

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!