Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Loading scripts on ngInclude (ng route) - Script loading directive
/**
* This module is a variant which supports document.write. If you need document.write use this instead
* Author: Deepak Subramanian @subudeepak(https://github.com/subudeepak)
* Distributed under MIT License
*/
/*global angular */
(function (ng) {
'use strict';
app.directive('script', function() {
return {
restrict: 'E',
scope: false,
link: function(scope, elem, attr)
{
var angularCorrections = //Document.write
function(code)
{
var parentNode = elem[0].parentNode;
if(!parentNode.id) parentNode.id = Date.now() +'_' + Math.floor((Math.random()*10)+1); //replace with your own random id generator
var re = new RegExp("document.write(ln)?", "g"); //Support for Document.write only
var newCode = code.replace(re,"document.getElementById('"+parentNode.id+"').innerHTML += ");
console.log(newCode);
return newCode;
};
if (attr.type==='text/javascript-lazy')
{
var s = document.createElement("script");
s.type = "text/javascript";
var src = elem.attr('src');
if(src!==undefined)
{
s.src = src;
}
else
{
var code = elem.text();
s.text = angularCorrections(code);
}
document.head.appendChild(s);
elem.remove();
}
}
};
});
}(angular));
/*
* Angular LoadScript
*
* Let angular load and execute lazy javascript from partials!
*
* This module is the result of this issue: "1.2.0rc1 regression: script tags not loaded via ngInclude"
* Issue url: https://github.com/angular/angular.js/issues/3756
*
* As of Angular 1.2.0 the ngInclude scripts does not permit execution of javascript from included partials.
* This little module execute code inside script tags with "javascript-lazy" attribute after partial loading,
* thus re-enabling this feature.
*
* ( please have a look at the issue comments, this angular feature was never planned nor included properly,
* was only a drawback of using jQuery for partial inclusion )
*
* This angular module have been created by @subudeepak(https://github.com/subudeepak) based on the code posted by @endorama (https://github.com/endorama)
* (based upon the code
* posted by @olostan (https://github.com/olostan) )
*
* Simply add this file, load ngLoadScript module as application dependency and use type="text/javascript-lazy"
* as type for script you which to load lazily in partials.
*
* License: 2013 - released to the Public Domain.
*/
/*global angular */
(function (ng) {
'use strict';
var app = ng.module('ngLoadScript', []);
app.directive('script', function() {
return {
restrict: 'E',
scope: false,
link: function(scope, elem, attr)
{
if (attr.type==='text/javascript-lazy')
{
var s = document.createElement("script");
s.type = "text/javascript";
var src = elem.attr('src');
if(src!==undefined)
{
s.src = src;
}
else
{
var code = elem.text();
s.text = code;
}
document.head.appendChild(s);
elem.remove();
}
}
};
});
}(angular));
@minoritea

hi,
Why did you comment out last of the code?

@minoritea

Forget it. The code works for me.

@subudeepak
Owner

@minoritea I can remove the commented portion :) It is a resident of the old endorama code. Let me know if you have any ideas for improving this ?

@grapswiz
grapswiz commented Apr 8, 2014

👍

@Dhino
Dhino commented Apr 23, 2014

Please tell me what is the mistake in my code.

Whenever i click on button i'm including trim.html in my ng-include. At that time it's throwing this following error.
Error: [ng:areq] http://errors.angularjs.org/1.2.11/ng/areq?p0=trimCtrl&p1=not%20a%20function%2C%20got%20undefined

I have my trimCtrl in "trim.js" file.

trim.html:

               <script type="text/javascript-lazy" src="/li/scripts/trim.js"></script>

               <div class="col-md-12" ng-controller="trimCtrl">
               <h3>Trim function Configuration</h3>
               <div class="col-md-12">
                       Description
                     <textarea class="col-md-12" ng-model="desc" style="padding : 0px"></textarea>
               </div>
               </div>

trim.js

app.controller("trimCtrl",['$scope','$http',function($scope,$http){
    console.log('in lazyload');
}]);
@subudeepak
Owner

@Dhino. This is a slightly more complicated issue than I thought .. I will look into it and give you an update soon.

I think there is a need to register the controller You may also need to do a synchronous call to fill the script innerhtml

Will reply with a more reasonable solution over this weekend

@shashvattrip

This works perfectly, however there's one more thing I want. How do I remove this once the directive have been destroyed?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment