标签：初始 strong 无限 fun sel 解决方法 move 描述 rem
本篇主要汇总一下使用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));
标签：初始 strong 无限 fun sel 解决方法 move 描述 rem
原文地址：https://www.cnblogs.com/lyr1213/p/9046430.html
