{"_id":"552e89055d4baa0d007836b2","category":{"_id":"552e88cf5d4baa0d007836b1","pages":["552e88e32594f70d001b2d0a","552e88ef06a32a0d009c2f8f","552e89055d4baa0d007836b2","552e8a47a702770d00d96e50"],"version":"552d17dea86ee20d00780b8c","project":"552d17dea86ee20d00780b89","__v":4,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-04-15T15:50:39.173Z","from_sync":false,"order":1,"slug":"api","title":"API"},"githubsync":"","project":"552d17dea86ee20d00780b89","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"},"user":"5519ab08eaa2ed2f002135a0","__v":6,"updates":["559b8b3d8b04e90d00702d9c","5645efd883218f19006e7d71"],"next":{"pages":[],"description":""},"createdAt":"2015-04-15T15:51:33.482Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":2,"body":"The directive usage is very similar to the service. The main interest here is that the content will be included and compiled once your modules have been loaded.\nThis means that you can use directives that will be lazy loaded inside the oc-lazy-load directive.\n\nUse the same parameters as a service:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<div oc-lazy-load=\\\"['js/testModule.js', 'partials/lazyLoadTemplate.html']\\\">\\n\\t<!-- Use a directive from TestModule -->\\n\\t<test-directive></test-directive>\\n</div>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nYou can use variables to store parameters:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$scope.lazyLoadParams = [\\n\\t'js/testModule.js',\\n\\t'partials/lazyLoadTemplate.html'\\n];\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<div oc-lazy-load=\\\"lazyLoadParams\\\"></div>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"oclazyload-directive","type":"basic","title":"Directive"}
The directive usage is very similar to the service. The main interest here is that the content will be included and compiled once your modules have been loaded. This means that you can use directives that will be lazy loaded inside the oc-lazy-load directive. Use the same parameters as a service: [block:code] { "codes": [ { "code": "<div oc-lazy-load=\"['js/testModule.js', 'partials/lazyLoadTemplate.html']\">\n\t<!-- Use a directive from TestModule -->\n\t<test-directive></test-directive>\n</div>", "language": "html" } ] } [/block] You can use variables to store parameters: [block:code] { "codes": [ { "code": "$scope.lazyLoadParams = [\n\t'js/testModule.js',\n\t'partials/lazyLoadTemplate.html'\n];", "language": "javascript" } ] } [/block] [block:code] { "codes": [ { "code": "<div oc-lazy-load=\"lazyLoadParams\"></div>", "language": "html" } ] } [/block]