AngularJS: Comment faire angulaire de script de charge à l'intérieur de ng-inclure?

La accepté de répondre ne fonctionne pas à partir de 1.2.0-rc1+ (Github problème).

Voici une solution rapide créé par endorama:

/*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 code = elem.text();
          var f = new Function(code);
          f();
        }
      }
    };
  });

}(angular));

Simplement ajouter ce fichier, charger ngLoadScript module de l'application de la dépendance et de l'utilisation type="text/javascript-lazy" type de script vous permettant de charger paresseusement dans les partiels:

<script type="text/javascript-lazy">
  console.log("It works!");
</script>

J'ai essayé neemzy de l'approche, mais il ne fonctionne pas pour moi en utilisant 1.2.0-rc.3. La balise de script à insérer dans le DOM, mais le javascript chemin ne serait pas chargé. Je soupçonne que c'était parce que le javascript j'ai essayé de charger a partir d'un domaine différent ou du protocole.
J'ai donc pris une approche différente, et c'est ce que j'ai trouvé, à l'aide de google maps, par exemple: (Gist)

angular.module('testApp', []).
directive('lazyLoad', ['$window', '$q', function ($window, $q) {
function load_script() {
var s = document.createElement('script'); //use global document since Angular's $document is weak
s.src = 'https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize';
document.body.appendChild(s);
}
function lazyLoadApi(key) {
var deferred = $q.defer();
$window.initialize = function () {
deferred.resolve();
};
//thanks to Emil Stenström: http://friendlybit.com/js/lazy-loading-asyncronous-javascript/
if ($window.attachEvent) {  
$window.attachEvent('onload', load_script); 
} else {
$window.addEventListener('load', load_script, false);
}
return deferred.promise;
}
return {
restrict: 'E',
link: function (scope, element, attrs) { //function content is optional
//in this example, it shows how and when the promises are resolved
if ($window.google && $window.google.maps) {
console.log('gmaps already loaded');
} else {
lazyLoadApi().then(function () {
console.log('promise resolved');
if ($window.google && $window.google.maps) {
console.log('gmaps loaded');
} else {
console.log('gmaps not loaded');
}
}, function () {
console.log('promise rejected');
});
}
}
};
}]);

J'espère que c'est utile pour quelqu'un.

J'ai utilisé cette méthode pour charger un fichier de script dynamiquement (à l'intérieur d'un contrôleur).

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "https://maps.googleapis.com/maps/api/js";
document.body.appendChild(script);

Pour charger dynamiquement recaptcha à partir d'un ui-view j'utilise la méthode suivante:

Dans application.js:

    .directive('script', function($parse, $rootScope, $compile) {
return {
restrict: 'E',
terminal: true,
link: function(scope, element, attr) {
if (attr.ngSrc) {
var domElem = '<script src="'+attr.ngSrc+'" async defer></script>';
$(element).append($compile(domElem)(scope));
}
}
};
});

Dans myPartial.client.view.html:

 <script type="application/javascript" ng-src="http://www.google.com/recaptcha/api.js?render=explicit&onload=vcRecaptchaApiLoaded"></script>

J'ai essayé d'utiliser Google reCAPTCHA explicitement. Voici l'exemple:

//put somewhere in your index.html
<script type="text/javascript">
var onloadCallback = function() {
grecaptcha.render('your-recaptcha-element', {
'sitekey' : '6Ldcfv8SAAAAAB1DwJTM6T7qcJhVqhqtss_HzS3z'
});
};

//link function of Angularjs directive
link: function (scope, element, attrs) {
...
var domElem = '<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>';
$('#your-recaptcha-element').append($compile(domElem)(scope));
}