AngularJS: Как создать скрипт с угловой загрузкой внутри ng-include?

Принятый ответ не будет работать с 1.2.0-rc1 + ( проблема Github ).

Вот быстрое исправление, созданное 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)); 

Просто добавьте этот файл, загрузите модуль ngLoadScript в зависимости от приложения и используйте type="text/javascript-lazy" как тип сценария, который вы лениво загружаете в частичное:

Короткий ответ: AngularJS («jqlite») не поддерживает это. Включите jQuery на свою страницу (до включения углового), и он должен работать. См. https://groups.google.com/d/topic/angular/H4haaMePJU0/discussion

Я попробовал подход Неемзи, но для меня это не сработало с использованием 1.2.0-rc.3. Тег скрипта будет вставлен в DOM, но путь javascript не будет загружен. Я подозреваю, что это связано с тем, что javascript, который я пытался загрузить, был из другого домена / протокола. Поэтому я принял другой подход, и именно это я и придумал, используя карты Google в качестве примера: ( 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'); }); } } }; }]); 

Надеюсь, это кому-то поможет.

Это больше не будет работать с 1.2.0-rc1. См. Этот вопрос для получения дополнительной информации об этом, в котором я опубликовал комментарий, описывающий быстрое обходное решение. Я также расскажу об этом здесь:

 // Quick fix : replace the script tag you want to load by a 
. // Then write a loadScript directive that creates your script tag and appends it to your div. // Took me one minute. // This means that in your view, instead of :  // You'll have : 
 // And then write a directive like : angular.module('myModule', []).directive('loadScript', [function() { return function(scope, element, attrs) { angular.element('').appendTo(element); } }]); 

Не лучшее решение когда-либо, но эй, ни то, ни другое не помещает метки сценария в последующие представления. В моем случае я должен сделать это, чтобы использовать Facebook / Twitter / и т. Д. виджеты.

Я использовал этот метод для загрузки файла сценария динамически (внутри controllerа).

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

ocLazyLoad позволяет лениво загружать скрипты в шаблоны / представления через маршрутизаторы (например, ui-router). Вот sniplet

 $stateProvider.state('parent', { url: "/", resolve: { loadMyService: ['$ocLazyLoad', function($ocLazyLoad) { return $ocLazyLoad.load('js/ServiceTest.js'); }] } }) .state('parent.child', { resolve: { test: ['loadMyService', '$ServiceTest', function(loadMyService, $ServiceTest) { // you can use your service $ServiceTest.doSomething(); }] } }); 

Чтобы динамически загружать recaptcha из ui-view я использую следующий метод:

В application.js :

  .directive('script', function($parse, $rootScope, $compile) { return { restrict: 'E', terminal: true, link: function(scope, element, attr) { if (attr.ngSrc) { var domElem = ''; $(element).append($compile(domElem)(scope)); } } }; }); 

В myPartial.client.view.html :

К сожалению, все ответы в этом сообщении не сработали для меня. Я продолжал получать следующую ошибку.

Не удалось выполнить ‘write’ в ‘Document’: невозможно записать в документ из асинхронно загруженного внешнего скрипта, если он явно не открыт.

Я узнал, что это происходит, если вы используете некоторые сторонние виджеты (востребованные в моем случае), которые также вызывают дополнительные внешние файлы JavaScript и пытаются вставить HTML. Глядя на консоль и код JavaScript, я заметил несколько строк:

 document.write(""); 

Я использовал сторонние файлы JavaScript (htmlParser.js и postscribe.js): https://github.com/krux/postscribe . Это решило проблему в этой статье и устранило указанную выше ошибку одновременно.

(Это был быстрый и грязный путь в сжатые сроки, который у меня есть сейчас. Мне неудобно использовать стороннюю библиотеку JavaScript. Надеюсь, кто-то может придумать более чистый и лучший способ.)

Я попытался использовать Google reCAPTCHA явно. Вот пример:

 // put somewhere in your index.html  

 //link function of Angularjs directive link: function (scope, element, attrs) { ... var domElem = ''; $('#your-recaptcha-element').append($compile(domElem)(scope)); }