本篇主要汇总一下使用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. input 框自动检测输入是否为数字

    最近做一个公众号,我这个菜鸡不得不学习很多东西,谁让老师要我一个人做这个项目呢? 好,进入正题,因为菜,所以很菜,但是百度很厉害啊,谁让我不好意思问老师,而且我也觉得问这么小的问题,太难以启齿.. 因 ...

  2. kali 系统膨胀后如何处理

    1.一般使用的kali 安装都是将系统文件全部放在一个总分区中,应用程序会产生临时文件,另外在安装软件的时候会出现 系统框架的不同,但是kali并不会检测该问题,直接当依赖的框架下载,可以是使用命令 ...

  3. Nginx突破高并发的性能优化 - 运维笔记

    在日常的运维工作中,经常会用到nginx服务,也时常会碰到nginx因高并发导致的性能瓶颈问题.今天这里简单梳理下nginx性能优化的配置(仅仅依据本人的实战经验而述,如有不妥,敬请指出~) 一.这里 ...

  4. LeetCode:135. 分发糖果

    LeetCode:135. 分发糖果 老师想给孩子们分发糖果,有 N 个孩子站成了一条直线,老师会根据每个孩子的表现,预先给他们评分. 你需要按照以下要求,帮助老师给这些孩子分发糖果: 每个孩子至少分 ...

  5. frp服务搭建

    安装命令 C wget --no-check-certificate https://raw.githubusercontent.com/clangcn/onekey-install-shell/ma ...

  6. 2019-ACM-ICPC-沈阳区网络赛-K. Guanguan's Happy water-高斯消元+矩阵快速幂

    2019-ACM-ICPC-沈阳区网络赛-K. Guanguan's Happy water-高斯消元+矩阵快速幂 [Problem Description] 已知前\(2k\)个\(f(i)\),且 ...

  7. 【python】使用openpyxl解析json并写入excel(xlsx)

    目标: 将json文本解析并存储到excel中 使用python包 openpyx import simplejsonmport codecsimport openpyxl import os # d ...

  8. SQL SERVER表压缩

    概述 SQL Server的主要性能取决于磁盘I/O效率,SQL Server .2008提供了数据压缩功能来提高磁盘I/O效率.表压缩意味着减小数据的磁盘占有量,所以压缩可以用在堆表.聚集索引的表. ...

  9. 如何在C中以二进制格式打印十进制数?

    回答: #define CHAR_BITS  8  // size of character #define INT_BITS  ( sizeof(int) * CHAR_BITS) //bits i ...

  10. Windows10-Neo4j安装问题及解决方案

    暑假都过得差不多了才终于开始搭环境了 1.下载Neo4j Neo4j官网下载翻墙的话还可以 不翻墙的话下了好几次都下不下来 不用下载desktop,下载community server就可以了 2.下 ...