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，（参见这里的参考 - ＆gt; https://docs.angularjs.org/api/ng/service/ $ templateCache）我相信这将是一个更好的方法。这样你就不需要做额外的工作了，它会被缓存。您点击按钮点击按钮就会显示如下：

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

并在html中

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

将.load html文件的内容存储在变量中

2 个答案: