javascript - 防止 ng-include 内容预加载，直到切换为显示

Question

这是我目前的代码:

<!-- main.html -->
<div ng-controller="MainController">
  <button type="button" ng-click="toggleImgView()">Show Images</button>
  <div ng-show="showImg">
    <ng-include src="'myTemplate.html'"></ng-include>
  </div>
</div>

<!-- myTemplate.html -->
<img ng-repeat="src in images" ng-src="{{ src }}/>

/* part of MainController */
$scope.images = [...];
$scope.showImg = false;
$scope.toggleImgView = function () {
  $scope.showImg = !$scope.showImg;
};

加载main.html时，由于$scope.showImg = false;，myTemplate.html默认隐藏，然后我可以通过单击显示图像按钮来切换以显示它。

尽管myTemplate.html 被隐藏，但它仍然会加载到 DOM 中。它包含大量图像，这可能会导致网络流量过大。因此，我不想加载它，直到用户单击显示图像按钮来切换模板。

Answer 1

如果您使用 ng-if 而不是 ng-show DOM，并且指令(如其中的 ng-include)获胜不会被插入和编译。