angular移動開發那些事

一開始叫我使用angular開發移動端頁面的時候我是拒絕的，且不說性能問題吧，主要是姐不會angular啊。移動端的開發我更傾向於vue。

移動端touch問題

angular官方提供了一個touch模塊angular-touch。首先，下載依賴包：

• Google CDN e.g.

"//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-touch.js"

• NPM e.g.

npm install --save angular-touch@X.Y.Z
或者： yarn add angular-touch@X.Y.Z

• Bower e.g.

bower install angular-touch#X.Y.Z

• code.angularjs.org e.g.

"//code.angularjs.org/X.Y.Z/angular-touch.js"

而後在html文件中引入依賴

<script src="path/to/angular.js"></script>
<script src="path/to/angular-touch.js"></script>

模塊註冊

angular.module('app', ['ngTouch']);

如此，ngClick指令在觸摸屏上的點擊事件就不會在有300ms的延遲了。此外，ngTouch模塊還提供ngSwipeLeft左劃和ngSwipeRight右劃指令。詳細狀況能夠看文檔

有的同窗可能習慣了touchstart/touchend/touchmove,在這裏推薦一個插件：ngTouch。

首先下載依賴
使用bower下載：

bower install ngtouch --save

使用npm下載

npm install ngtouch --save

而後再html文件中引入依賴

<script type="text/javascript" src="path/to/components/ngtouch/build/ngTouch.min.js"></script>

模塊注入

var app = angular.module("demoapp", ["ngTouch"]);

使用狀況以下

<div ng-touchmove="someFunction()" ng-touchstart="someFunction()" ng-touchend="someFunction()"></div>

swiper輪播

angular的輪播圖我用的插件是angular-swiper， 這裏遇到了一個坑，就是ksSwiper模塊執行時數據尚未請求回來，結果沒法滑動。可使用ng-if判斷數據的長度，當長度大於0時再調用

ks-swiper-container(initial-slide="0" loop="true" show-nav-buttons="false" slides-per-view="1" space-between="5" pagination-clickable="false" ng-if="self.master.ofList.length>0")

ng-repeat不能有重複的值

這個問題是作輪播圖的時候遇到的，當ng-repeat綁定的數組有重複的值時會報錯「ngRepeat:dupes」，因此要注意數組去重。

監聽數組變化

angular的$swatch在監聽數組的變化時，須要傳入一個true參數，不然監聽不到變化。如：

$scope.$watch("yourValue", function(newValue, oldValue, scope) {},true);

綁定了ng-click的元素，使用原生的js觸發click出錯

好比綁定了ng-click的元素，再用document.getElementById('myid').click()觸發click事件，會報錯。這個問題很奇怪，理論上不應呀，難道是我本身的問題？哪位大神若是看到的還請指教一下

ng-repeat內使用ng-if指令，參數$index會無效

好比

li.clearfix(ng-repeat="item in self.items")
    div(ng-if="self.isShow")
        div(ng-click="self.clickHandler($index)")

這裏的$index傳的值並非咱們想要的下標。解決方法：能夠改爲ng-show或者使用一個變量記錄下標

目前遇到的問題暫時先這樣了，後面會持續更新。時間窮忙，能力也有限，寫得不對的地方還請見諒~

---

關注做者吧~