angular移动开发那些事

2019年9月15日 179次阅读 来源: lynneshow

一开始叫我使用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或者使用一个变量记录下标

目前遇到的问题暂时先这样了，后面会持续更新。时间穷忙，能力也有限，写得不对的地方还请见谅~

关注作者吧~

《angular移动开发那些事》

    原文作者：lynneshow
    原文地址: https://segmentfault.com/a/1190000007524677
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞