Loading scripts on ngInclude (ng route) - Script loading directive

angular-loadscript-with-documentwrite.js

/**
* 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.js

/*
 *  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));

Forget it. The code works for me.

@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 ?

👍

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');
}]);

@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

very good. this is the other way to exec the script, http://stackoverflow.com/questions/19917774/why-ng-scope-is-added-to-javascript-inline-of-my-partial-view-and-makes-alert-no/22476888#22476888

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

This works perfectly really great stuff.....!! thanks a lot :) 👍