Framework7 + Angular 開發問題解決匯總

本篇主要匯總一下使用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));