Framework7 + Angular 开发问题解决汇总

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

一、页面表格按需加载

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

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

1、页面：

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

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

2、js（只显示关键代码，其他用省略号代替）：

1            ......
2            $scope.queryParam = {};
3            
4            ......
5            // 初始化分页参数
6            $scope.pgPageInfo = {
7                pageNum: 1,
8                pageSize: 20
9            };
10            // 初始化 无限加载 参数
11            var $$ = Dom7;
12            var loading = false;
13
14            $$('.infinite-scroll').on('infinite', function () {
15                moreOrderInfo();
16            });
17
18            function moreOrderInfo() {
19                var lastLoadedIndex = $$('#orderContent tr').length;
20
21               ......
22
23                // 全部内容加载完后，显示底线，return
24                if (lastLoadedIndex >= $scope.pgPageInfo.total) {
25                    $('#orderNomore').show();    
26                    return;
27                }
28
29                var param = $scope.queryParam;  // 查询参数
30                param.pageInfo = {
31                    pageNum: $scope.pgPageInfo.pageNum + 1,
32                    pageSize: 20
33                };           
34                    
35     PiecesListFactory.queryOrderInfoRequest(param).then(function (data) {
36                    loading = false;
37
38                    app.myApp.hideIndicator();
39
40                    ModalFactory.hideLoading();
41                    if (null == data) {
42                        app.myApp.detachInfiniteScroll($$('.infinite-scroll'));
43                        $$('.infinite-scroll-preloader').remove();
44                    } else {
45                        $scope.pgPageInfo = data.pageInfo;
46
47                        var orderHtml = "";
48                        for (var i = 0; i < data.result.length; i++) {
49                            // 循环data.result，得到拼接的orderHtml 
50                        }
51                 
52                        $('#orderContent').append(orderHtml); // 将加载的内容插入到页面
53
54                        lastLoadedIndex = $$('#orderContent tr').length;
55
56                    }
57
58                }, function (data) {
59                    app.myApp.hideIndicator();
60                    ModalFactory.alert("数据加载失败！");
61                });
62            }

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

1           var init = function () {
2                
3                app.myApp.attachInfiniteScroll($$(".infinite-scroll"));
4
5            };
6            init();

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

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

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

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

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