將.load html文件的內容存儲在變量中

Question

單擊按鈕，我將tfoot附加到table 。 tfoot的內容是.load到本地.html文件的結果。 雖然我的解決方案有效，但我每次點擊都會執行.html文件。 第一次點擊的結果可以存儲在變量中，並重復使用嗎？

$scope.btnClick = function() {

    var tfoot = $('#datepicker table').find('tfoot');
    if(!tfoot.length) {
        tfoot = $('<tfoot>').appendTo('#datepicker table');
    }

    tfoot.load('myDir/calendar/customFooter.html');

}

Answer 1

您可以通過在load()方法上使用回調來存儲結果來實現此目的。 我使用你的$scope變量，但你可以根據需要修改它。 嘗試這個：

$scope.btnClick = function() {    
    var tfoot = $('#datepicker table').find('tfoot');
    if (!tfoot.length) {
        tfoot = $('<tfoot>').appendTo('#datepicker table');
    }

    if ($scope.tfootContent) {
        tfoot.html($scope.tfootContent);
    } else {
        tfoot.load('myDir/calendar/customFooter.html', function(response) {
            $scope.tfootContent = response;
        }); 
    }
}

Answer 2

你可以使用templateCache，（參見參考資料 - > https://docs.angularjs.org/api/ng/service/ $ templateCache）我相信這將是一個更好的方法。 這樣你就不需要做額外的工作了，它會被緩存。 你會顯示tfoot on button按鈕，所以它會是這樣的：

$scope.btnClick = function() { tfootVisible = true;}

並在HTML中

<table id="datepicker">
   <tfoot ng-include="'templateId.html'" ng-if="tfootVisible"></tfoot>
</table>