AngularJS：如何使ng-include内的angular度加载脚本？
嘿，我正在build立一个angular度的网页。 问题是有些东西已经没有angular度地构build，我也必须包括它们
问题是这个。
我在main.html中有这样的东西：
<ngInclude src="partial.html"> </ngInclude> 而我的partial.html有这样的东西
<h2> heading 1 <h2> <script type="text/javascript" src="static/js/partial.js"> </script>
而我的partial.js与angularjs无关。 nginclude工程，我可以看到的HTML，但我看不到所有的JavaScript文件被加载。 我知道如何使用萤火虫/铬开发工具，但我甚至不能看到正在build立的networking请求。 我究竟做错了什么？
我对angular色标签有一些特殊的含义。 我可以重写吗？
接受的答案将不会从1.2.0-rc1 +（ Github的问题 ）。
这是由endorama创build的一个快速修复：
/*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"作为要在部分文件中加载的脚本的types：
<script type="text/javascript-lazy"> console.log("It works!"); </script>
简短的回答：AngularJS（“jqlite”）不支持这一点。 在你的页面上包含jQuery（包括Angular之前），它应该可以工作。 请参阅https://groups.google.com/d/topic/angular/H4haaMePJU0/discussion
我尝试了neemzy的方法，但是对于使用1.2.0-rc.3的程序并不适用。 脚本标记将被插入到DOM中，但是JavaScriptpath将不会被加载。 我怀疑这是因为我试图加载的JavaScript是从不同的域/协议。 所以我采取了一种不同的方法，这就是我用谷歌地图作为例子：（ 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 <div load-script></div>. // 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 : <script src="/path/to/my/file.js"></script> // You'll have : <div ng-load-script></div> // And then write a directive like : angular.module('myModule', []).directive('loadScript', [function() { return function(scope, element, attrs) { angular.element('<script src="/path/to/my/file.js"></script>').appendTo(element); } }]);
不是有史以来最好的解决scheme，但是，嘿，也不是在随后的视图中放置脚本标签。 在我的情况下，我必须这样做是为了使用Facebook / Twitter /等。 小部件。
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(); }] } });
我使用这种方法来dynamic加载脚本文件（在控制器内）。
var script = document.createElement('script'); script.type = 'text/javascript'; script.src = "https://maps.googleapis.com/maps/api/js"; document.body.appendChild(script);
要从ui-viewdynamic加载recaptcha我使用以下方法：
在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)); } } }; });
在myPartial.client.view.html ：
<script type="application/javascript" ng-src="http://www.google.com/recaptcha/api.js?render=explicit&onload=vcRecaptchaApiLoaded"></script>
不幸的是，这篇文章中的所有答案都不适合我。 我不断收到以下错误。
无法在“文档”上执行“写入”：除非明确打开，否则无法从asynchronous加载的外部脚本写入文档。
我发现如果使用一些第三方小部件（在我的情况下为demandforce），也会调用额外的外部JavaScript文件并尝试插入HTML，则会发生这种情况。 看着控制台和JavaScript代码，我注意到了这样的多行：
document.write("<script type='text/javascript' "..."'></script>");
我使用了第三方JavaScript文件（htmlParser.js和postscribe.js）： https ： //github.com/krux/postscribe 。 这解决了这个post中的问题，同时修正了上面的错误。
（在现在这个严格的截止date之前，这是一个快速和肮脏的方法，但是我不习惯使用第三方的JavaScript库，我希望有人能提出一个更清洁，更好的方法。
我试图明确地使用Google reCAPTCHA。 这是一个例子：
// 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)); }
