{"_id":"552e89e82594f70d001b2d0c","githubsync":"","version":{"_id":"552d17dea86ee20d00780b8c","project":"552d17dea86ee20d00780b89","__v":7,"createdAt":"2015-04-14T13:36:30.892Z","releaseDate":"2015-04-14T13:36:30.892Z","categories":["552d17dfa86ee20d00780b8d","552e7d7406a32a0d009c2f7b","552e88cf5d4baa0d007836b1","552e8936a702770d00d96e4d","552e895434565d0d007b4a8d","552e89f82594f70d001b2d0e","552f8a9d8f136c0d005031e9"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"category":{"_id":"552e89f82594f70d001b2d0e","__v":3,"project":"552d17dea86ee20d00780b89","version":"552d17dea86ee20d00780b8c","pages":["552e8a0006a32a0d009c2f96","552e8a0f06a32a0d009c2f98","552e8a5b5d4baa0d007836b5"],"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-04-15T15:55:36.746Z","from_sync":false,"order":3,"slug":"other","title":"Other"},"__v":9,"project":"552d17dea86ee20d00780b89","user":"5519ab08eaa2ed2f002135a0","updates":["556f1459ebba950d008e931f","5b606ce7b5793c00033c69ce"],"next":{"pages":[],"description":""},"createdAt":"2015-04-15T15:55:20.885Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":0,"body":"> I lazy-loaded a directive but nothing changed on my page\n\nIf the directive was in your DOM before you lazy-loaded its definition, you need to tell Angular that it should parse the DOM to recompile the new directive. To do that you need to use [$compile](https://docs.angularjs.org/api/ng/service/$compile) :\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"$ocLazyLoad.load('gridModule').then(function() {\\n\\t$compile(angular.element('body'))($scope);\\n});\",\n \"language\": \"javascript\"\n }\n ]\n}\n[/block]\nYou could also use the [ocLazyLoad directive](doc:oclazyload-directive), it was mainly written just for this case.\n\n\n> Is it possible to unload a resource ?\n\nThere is no way to unload javascript, but you can remove css by deleting the link tag of your resource with something like that:\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"$('link[href=\\\"/url/to/your/file.css\\\"]').remove();\",\n \"language\": \"javascript\"\n }\n ]\n}\n[/block]\n> Do you have a plunkr I could use to open an issue ?\n\nYes, You can fork this one: http://plnkr.co/edit/n4DG0bbC14Mm1uccBptd?p=preview\n\n\n> How can I use a service that I just lazy loaded ?\n\nYou have to use [$injector](https://docs.angularjs.org/api/auto/service/$injector):\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"var app = angular.module(\\\"myApp\\\", [\\\"oc.lazyLoad\\\"]);\\n\\napp.controller('MyCtrl', function($scope, $ocLazyLoad, $injector) {\\n $ocLazyLoad.load('ngDialog.js').then(function() {\\n var ngDialog = $injector.get('ngDialog');\\n ngDialog.open({\\n template: 'dialogTemplate'\\n });\\n });\\n});\",\n \"language\": \"javascript\"\n }\n ]\n}\n[/block]\n> Can I lazy-load all AngularJS modules?\n\nNo. While you can load almost any module it is not possible to load some 'native' modules because they are to tightly integrated into AngularJS. An incomplete list of modules not lazy-loadable: ngAnimate, ngRoute, ngSanitizer, ngTouch.\n(If you stumble across a further module please drop an edit suggestion).","excerpt":"","slug":"faq","type":"basic","title":"FAQ"}

Advanced usage

Other

FAQ

> I lazy-loaded a directive but nothing changed on my page
If the directive was in your DOM before you lazy-loaded its definition, you need to tell Angular that it should parse the DOM to recompile the new directive. To do that you need to use [$compile](https://docs.angularjs.org/api/ng/service/$compile) :
[block:code]
{
"codes": [
{
"code": "$ocLazyLoad.load('gridModule').then(function() {\n\t$compile(angular.element('body'))($scope);\n});",
"language": "javascript"
}
]
}
[/block]
You could also use the [ocLazyLoad directive](doc:oclazyload-directive), it was mainly written just for this case.
> Is it possible to unload a resource ?
There is no way to unload javascript, but you can remove css by deleting the link tag of your resource with something like that:
[block:code]
{
"codes": [
{
"code": "$('link[href=\"/url/to/your/file.css\"]').remove();",
"language": "javascript"
}
]
}
[/block]
> Do you have a plunkr I could use to open an issue ?
Yes, You can fork this one: http://plnkr.co/edit/n4DG0bbC14Mm1uccBptd?p=preview
> How can I use a service that I just lazy loaded ?
You have to use [$injector](https://docs.angularjs.org/api/auto/service/$injector):
[block:code]
{
"codes": [
{
"code": "var app = angular.module(\"myApp\", [\"oc.lazyLoad\"]);\n\napp.controller('MyCtrl', function($scope, $ocLazyLoad, $injector) {\n $ocLazyLoad.load('ngDialog.js').then(function() {\n var ngDialog = $injector.get('ngDialog');\n ngDialog.open({\n template: 'dialogTemplate'\n });\n });\n});",
"language": "javascript"
}
]
}
[/block]
> Can I lazy-load all AngularJS modules?
No. While you can load almost any module it is not possible to load some 'native' modules because they are to tightly integrated into AngularJS. An incomplete list of modules not lazy-loadable: ngAnimate, ngRoute, ngSanitizer, ngTouch.
(If you stumble across a further module please drop an edit suggestion).