AngularJS ng-include only once

Question

How can I use ng-include in such way that it's content will be loaded only once? Here is what I have:

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

In my case only one condition is true at some moment of time. And any condition can change its value many times during page lifetime. So ng-include will load the same content again and again. How can I tell Angular to process ng-include only once - when the appropriate condition becomes true for the first time? Loading them all at once will kill the page because every template is large and heavy. Also there is no strict sequence of condition changes, for example, condition-3 may never become true during page lifetime - I'd like not to load url-3 content at all in this case. Thanks!

UPDATE Yes, template is already on cache. But it has a complicated internal structure like references to external images, iframes and so on - all this things are reloading each time when I'm using ng-include .

Answer 1

You have many solutions but only 2 come to my mind at the moment

1° Replace the ng-if for a ng-show, as the ng-if deletes the dom and all children scopes available, forcing the framework to make the request once again, while if you were using ng-show, the dom would only be hidden and the request would have only be made once.

2° If you do need to use ng-if and the content from the server is static, you could cache it on the javascript layer by manually accesing the $templateCache service provided by angular, or if the content you wish to load is html, you could either use the $templateCache service on the javascript layer or use the ng-template tag to preload that data.

Example:

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

Cheers

Answer 2

How about using only one ng-include and using some logic in the controller to switch which source to use using a binding? This way only one will ever be loaded at a time.

Controller

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';
        }
    });
}

This way only one template will ever be loaded at a time, and you've reduced the number of bindings from 3 to 1. (however you have added a watch so effectively from 3 to 2 maybe)