Delayed compilation of hidden elements in angular.js - angularjs

Question

I have a fairly complex angular.js app that has a "show" mode and an "edit" mode on the same page. Most of the complexity is in the edit mode, and most users won't ever be in "edit" mode.
You can see an example here: http://www.chefsteps.com/activities/squeaky-cheese-curds (but you won't have access to edit mode). As you'll see, my page loads are slower than ideal.
In many places throughout the page I have whole complex nested sections that are protected by
ng-show="editMode"
Is there any way that I could have angular delay compiling the whole subtree under there either until editMode becomes true or at least until the rest of the page has rendered?

Answer 1

You could probably use a combination of ngSwitch and ngInclude.
For the sections you need to deal with, instead of the ng-show, use ng-switch:
<section ng-switch on='editMode'>
<!-- editing case, leave src
<div ng-switch-when='true'>
<div ng-include src='edittemplates.sectionFoo'></div>
</div>
<!-- show case -->
<div ng-switch-when='false'>
<!-- show some stuff -->
</div>
</section>
Usually, ng-switch will still compile all the DOM, but the trick here will be to initially
have the edittemplates object start out with empty keys:
App.controller('Foo', function($scope) {
$scope.edittemplates = {
sectionFoo: ''
};
});
Then later, when you switch to edit mode, fill in those template values:
$scope.edit = function() {
$scope.editMode = true;
if ($scope.edittemplatesLoaded) return; // Don't set these twice
$scope.edittemplates.sectionFoo = 'sectionFoo.html';
$scope.edittemplates.sectionBar = 'sectionBar.html';
// etc.
$scope.edittemplatesLoaded = true;
};
Because the src attribute initially will be empty, there will be nothing to compile initially.
I haven't tried this, as I haven't needed anything like it yet, but it should work.