本篇主要汇总一下使用Framework7 + Angular 开发中遇到的一些难点及我的解决方法,以后再遇到会在这里继续更新。

一、页面表格按需加载

情况描述:默认加载10条,在用户上拉页面是再进行下一页的内容加载。

解决方法:利用Framework7 的无限滚动。

1、页面:

<tbody id="orderContent">
<tr ng-repeat="order in orderInfoList">
<td><span ng-if="order.orderNo == null">--</span><span ng-if="order.orderNo != null">{{order.orderNo}}</span></td>
<td><span ng-if="order.orderType == null">--</span><span ng-if="order.orderType != null">{{order.orderType}}</span></td>
<td><span ng-if="order.completeStatus == null">--</span><span ng-if="order.completeStatus != null">{{order.completeStatus}}</span></td>
<td class=" ">
<button class="btn btn-primary btn-xs" ng-click="selectOrderInfoDetailModel($index);">详情</button>
<button class="btn btn-warning btn-xs" ng-click="deleteOrderInfoDetailModel($index);">删除</button>
</td>
</tr>
</tbody>

将后面加载的内容插入到 id="orderContent" 的 tbody 中。

2、js(只显示关键代码,其他用省略号代替):

            ......
$scope.queryParam = {}; ......
// 初始化分页参数
$scope.pgPageInfo = {
pageNum: 1,
pageSize: 20
};
// 初始化 无限加载 参数
var $$ = Dom7;
var loading = false; $$('.infinite-scroll').on('infinite', function () {
moreOrderInfo();
}); function moreOrderInfo() {
var lastLoadedIndex = $$('#orderContent tr').length; ...... // 全部内容加载完后,显示底线,return
if (lastLoadedIndex >= $scope.pgPageInfo.total) {
$('#orderNomore').show();
return;
} var param = $scope.queryParam; // 查询参数
param.pageInfo = {
pageNum: $scope.pgPageInfo.pageNum + 1,
pageSize: 20
}; PiecesListFactory.queryOrderInfoRequest(param).then(function (data) {
loading = false; app.myApp.hideIndicator(); ModalFactory.hideLoading();
if (null == data) {
app.myApp.detachInfiniteScroll($$('.infinite-scroll'));
$$('.infinite-scroll-preloader').remove();
} else {
$scope.pgPageInfo = data.pageInfo; var orderHtml = "";
for (var i = 0; i < data.result.length; i++) {
// 循环data.result,得到拼接的orderHtml
} $('#orderContent').append(orderHtml); // 将加载的内容插入到页面 lastLoadedIndex = $$('#orderContent tr').length; } }, function (data) {
app.myApp.hideIndicator();
ModalFactory.alert("数据加载失败!");
});
}

3、还有一个地方,就是在angular初始化的时候,要对列表内容块加上Framework7 的滚动监听

           var init = function () {

                app.myApp.attachInfiniteScroll($$(".infinite-scroll"));

            };
init();

二、页面中 angularJS 动态加载的内容,ng-click 无效

情况描述:完成了上面的列表内容动态加载,又遇到了一个问题,如果加载的内容不触发事件,就完事了,可是我这里,列表有个操作(详情,删除),所以之后发现动态加载的内容中 angularJS 的 ng-click 无效。。。

解决方法:用 $compile服务 编译一下动态加载的内容。

将上面的    $('#orderContent').append(orderHtml);   中的动态内容 orderHtml 处理一下::

var orderLink = $compile(orderHtml);
$('#orderContent').append(orderLink($scope));

Framework7 + Angular 开发问题解决汇总的更多相关文章

  1. Kinect开发资源汇总

    Kinect开发资源汇总   转自: http://www.sigvc.org/bbs/forum.php?mod=viewthread&tid=254&highlight=kinec ...

  2. cordova开发问题汇总

    cordova开发问题汇总 1. 导入工程的"The import android cannot be resolved"错误解决方法 2. MainActivity] Unabl ...

  3. Win10 FaceAPI小demo开发问题汇总

    Win10 FaceAPI小demo开发问题汇总 最近使用微软牛津计划做一个小demo,使用FaceAPI做一个小应用,实现刷脸的功能.开发的过程中用到几个问题,具体如下: Stream 与IRand ...

  4. android开发问题汇总

    android开发问题汇总 一. 无法创建新android项目 在eclipse创建新项目时出现: this template depends on the android support libra ...

  5. Visual Studio Code作为Angular开发工具常用插件安装、json-server安装与使用、angular/cli安装失败问题

    前提准备: 搭建好Angular开发环境 1 安装Visual Studio Code 教程简单,不会的去问度娘 2 安装Chrome浏览器 教程简单,不会的趣闻度娘 3 Visual Studio ...

  6. Angular开发实践(一):环境准备及框架搭建

    引言 在工作中引入Angular框架将近一年了,在这一年中不断的踩坑和填坑,当然也学习和积累了很多的知识,包括MVVM框架.前后端分离.前端工程化.SPA优化等等.因此想通过Angular开发实践这系 ...

  7. Android进阶(二十)AndroidAPP开发问题汇总(四)

    · Android进阶(二十)AndroidAPP开发问题汇总(四) android:layout_width和android:width的区别 基中的android:layout_width和and ...

  8. Android进阶(十九)AndroidAPP开发问题汇总(三)

    Android进阶(十九)AndroidAPP开发问题汇总(三) Java解析XML的几种方式: http://inotgaoshou.iteye.com/blog/1012188 从线程返回数据的两 ...

  9. Android进阶(十八)AndroidAPP开发问题汇总(二)

    Android进阶(十八)AndroidAPP开发问题汇总(二) 端口被占用解决措施: Android使用SimpleAdapter更新ListView里面的Drawable元素: http://ww ...

随机推荐

  1. sed 查询特定内容

    查询命令对照表 打印/etc/passwd中第10行的内容 sed -n '10p' /etc/passwd 打印/etc/passwd中第8行开始,到第15行结束的内容 sed -n '8,15p' ...

  2. 利用EasyUI 数据网格(DataGrid)的loader属性实现后端分页

    该属性在easyui官方文档中并没有详细阐述,通过简单的资料查询和摸索,实现了easyUI数据网格的后端分页功能. 在官网文档中这样阐述loader属性: 定义如何从远程服务器加载数据.返回false ...

  3. Django组件之用户认证

    auth模块 1 from django.contrib import auth django.contrib.auth中提供了许多方法,这里主要介绍其中的三个: 1.1 .authenticate( ...

  4. python高级特性-filter

    python内建的函数filter用于过滤序列 和map()相同:filter()也接收一个函数的序列. 和map()不同:filter()把传入的函数依次依次作用于每个元素,然后根据返回值是True ...

  5. jmeter接口测试json详解

    本篇围绕jmeter(压力测试工具),请求json与返回json串处理进行解析,初入测试,理解如有不对的地方请大家及时提点~~ 在这里jmeter工具的使用不在做解释 首先说下乱码问题,在这里无脑5步 ...

  6. Eigen

    Eigen: https://eigen.tuxfamily.org/dox/GettingStarted.html

  7. webpack 配置react脚手架(四):路由配置

    1. 由于 react-router 是集成了 react-router-dom 和 react-router-native的一起的,所以这里要使用的是 react-router-dom, 2. 安装 ...

  8. 云计算(6)--一些MapReduce的例子

    例1:文件的字符串查找 这里reduce不做merge的工作,因为每行都是不一样的,不能merge. 与传统的grep程序相比,使用MapReduce可以加快处理,因为1它是Distributed的, ...

  9. 调试错误,请回到请求来源地,重新发起请求。 错误代码 insufficient-isv-permissions 错误原因: ISV权限不足,建议在开发者中心检查对应功能是否已经添加

    接人H5手机网站支付宝支付时,已经将表单发给页面了,支付宝响应调试错误,请回到请求来源地,重新发起请求.错误代码 insufficient-isv-permissions 错误原因: ISV权限不足, ...

  10. Java8新特性--函数式编程

    在jdk8中什么是函数式接口: 1.被@FunctionalInterface注解修饰的. 2.接口里边只有一个非default的方法. 满足以上2个条件的即为函数式接口,ps:即使一个接口没有被@F ...