What is the preferred way of lazy loading data for an ng-include in Angular?

Question

I create (parent) rows when looping through a list of objects using ng-repeat. I also create a hidden row. The visible row contains soms basic data and the hidden row (detail) contains all the data. I want the detail row to be visible when the parent row is clicked. And I only want to load the data when the details row becomes visible. Also, once the details of a row are already loaded, I don't want to go to server again.

I've created a partial for the details view, so my code looks like this:

<div ng-include="'/Customer/View'"></div>

Off course I can locate to /Customer/View/12, but then all the data is loaded, even when there's no request.

So, what is the way to go to accomplish this? Can someone point me in the right direction?

Answer 1

One way you can accomplish this is to use a variable with your ngInclude and set it on click of the parent row.

Here is a sample fiddle and if you use the network tab of Chrome (or other browser) you can see that the url in the include won't be requested until you click on an item.

<div ng-repeat="item in items" ng-click="url = item">
    <span ng-hide="url">Click to load</span>
    <span ng-show="url">Loaded item {{url}}</span>
    <div ng-include="url"></div>
</div>

At a high level what's going on here is:

1. url is initially not set to anything so ng-include has nothing to fetch
2. When clicking on a parent item set the url variable to something using ng-click (you can use a scope function for more control over the url like in this example)
3. The variable inside that scope is now set so ng-include can fetch the url as it is requested on click

Note: You won't have to declare the url variable in javascript since ngRepeat creates a new scope for each item you are looping through so the click action setting the variable will only affect the current scope you are working with.