将.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>