gistfile1.js

/*global angular*/
(function ( ) {
	
	/* 	This interceptor allows you to target partials
	  	within lazy loaded html files. Usage:
	  	
	  	index.html:
	  	<div>
	  		data-ng-include="/partials/components.html#single-component>
  		</div>
  		
  		/partials/components.html
  		
  		<div>
  			Content pertaining to components.html
  		</div>
  		
  		<script type="text/ng-template" id="/partials/components.html#single-component">
  			
  		</script>
  	*/
	
	
	var ERR_NOT_FOUND = 'Targeted partial was not found in parent ',
		app = angular.module('YOUR_MODULE_NAME');
	
	app.factory('templateRequestInterceptor', [ '$rootScope', '$injector', '$templateCache', '$q', function ( $rootScope, $injector, $templateCache, $q ) {
			
			var $compile,
				$http;
			
			return {
				request: function ( config ) {
					var match,
						base,
						deferred,
						tplResult,
						httpPromise;
					
					// check if URL is a targeted partial
					match = config.url.match(/((.*?)\.html)\#(.*)$/);
					if(!match) {
						return config;
					}
					
					// check if partial is cached
					tplResult = $templateCache.get(config.url);
					
					if(tplResult) {
						return config;
					}
					
					deferred = $q.defer();
					
					base = match[1];
					
					if(!$http) {
						$http = $injector.get('$http');
					}
					
					function resolveConfig ( ) {
						var transformer = function ( ) {
							var data = $templateCache.get(config.url);
							
							_.pull(config.transformResponse, transformer);
							
							if(!data || data.then !== undefined) {
								data = undefined;
								console.log(config.url + ': ' + ERR_NOT_FOUND + base);
							}
							
							return data;
						};
						config.transformResponse.push(transformer);
						deferred.resolve(config);
					}
					
					// check if base url is being loaded
					tplResult = $templateCache.get(base);
					
					if(tplResult) {
						if(tplResult.then === undefined) {
							// base url is loaded but partial was not found
							return config;
						} else {
							// wait until base url is loaded
							tplResult.then(resolveConfig);
						}
					} else {
						// load url
						httpPromise = $http({
								method: 'GET',
								url: base,
								cache: $templateCache
							})
							.success(function ( response ) {
								
								if($templateCache.get(base)) {
									// resolve with current config as partial was already loaded
									deferred.resolve(config);
									return;
								}
								
								var scope = $rootScope.$new();
								
								if(!$compile) {
									$compile = $injector.get('$compile');
								}
								
								// compile 
								
								$compile(response)(scope, function ( /*clonedElement, sc*/ ) {
									resolveConfig();
									scope.$destroy();
								});
								
								
							});
					}
					
					return deferred.promise;
				}
			};
			
		}])
		.config([ '$httpProvider', function ( $httpProvider ) {
			$httpProvider.interceptors.push('templateRequestInterceptor');
		}]);
	
})();