Skip to content

Instantly share code, notes, and snippets.

@dgieselaar
Last active August 29, 2015 14:03
Show Gist options
  • Save dgieselaar/02a11f76d7b03c0f0143 to your computer and use it in GitHub Desktop.
Save dgieselaar/02a11f76d7b03c0f0143 to your computer and use it in GitHub Desktop.
/*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');
}]);
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment