本篇主要匯總一下使用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 開發問題解決匯總