wait to load angularjs directive template -

wait to load angularjs directive template -

what trying postpone loading angular js template directive until need it. might not need @ all. there way can maybe load template directive if need it. service way this? application loads lot of directive templates , avoid loading much stuff unless need it. exact problem @ hand loading of template login form. if user clicks on button , he/she not logged in want slideopen (using jquery) login form.

in vast bulk of cases, there no value dynamically loading static directive templates. little doesn't create sense it. but, possible. however, of time, strategy used dynamic templates.

it requires $http fetch template , $compile wire angularjs.

class="lang-js prettyprint-override">app.directive('testdirective', function($http,$compile) { homecoming { scope: { show: '&' }, link: function( scope, element, attrs ) { var tpl, url = 'testdirective.tpl.html'; scope.$watch( 'show()', function (show) { if ( show ) { showthedirective(); } }); function showthedirective () { if ( !tpl ) { $http.get( url ).then( function ( response ) { tpl = $compile( response.data )( scope ); element.append(tpl); }); } } } }; });

here's plunker demonstrating works.

angularjs