AngularJS ng-只包括一次

Question

如何使用ng-include，使其内容只加载一次？以下是我所拥有的：

<div data-ng-if="%condition-1%" data-ng-include="%url-1%"></div>
<div data-ng-if="%condition-2%" data-ng-include="%url-2%"></div>
<div data-ng-if="%condition-3%" data-ng-include="%url-3%"></div>
...

在我的例子中，只有一个条件在某个时候是正确的。任何条件都可以在页面生存期内多次更改其值。因此，ng-include将一次又一次地加载相同的内容。当适当的条件第一次变成真的时候，我怎么能告诉角只处理一次ng-include呢？同时加载它们会扼杀页面，因为每个模板都很大而且很重。此外，也没有严格的条件更改序列，例如，在页面生存期内，condition-3可能永远不会变为真--在这种情况下，我完全不想加载url-3内容。谢谢!

更新是的，模板已经在缓存中了。但是它有一个复杂的内部结构，比如对外部图像的引用，iframes等等--当我每次使用ng-include时，所有这些都是重新加载的。

Answer 1

你有很多解决办法，但我现在只想到两个

1°替换ng-如果用于ng显示，作为ng-if删除dom和所有可用子作用域，迫使框架再次发出请求，而如果使用ng-show，则dom只隐藏一次，请求只能发出一次。

2°如果您确实需要使用ng-if，并且来自服务器的内容是静态的，您可以通过手动访问angular提供的$templateCache服务将其缓存到javascript层，或者如果您希望加载的内容是html，则可以在javascript层使用$templateCache服务，或者使用ng-模板标记预加载数据。

示例：

<script id="url/you/want.html" type="text/ng-template">
<div>I am preloaded dom that responds to the url/you/want.html 
requests made by this application 
</div>
</script>

干杯

Answer 2

如果只使用一个ng-包含并使用控制器中的一些逻辑来切换使用绑定的源如何？这样一次只能装一个。

控制器

function($scope) {
    $scope.activeTemplate = null; //some default or even null

    $scope.$watch('condition', function(newvalue) {

        //whatever logic you need to switch template

        if (newvalue == 'condition1') {
            $scope.activeTemplate = '/path/to/condition1.html';
        } else if (newvalue == 'condition2') {
            $scope.activeTemplate = '/path/to/condition2.html';
        } else {
            $scope.activeTemplate = '/path/to/default.html';
        }
    });
}

这样，一次只能加载一个模板，并且将绑定的数量从3减少到1。