嘿，我正在用 Angular 构建一个网页。问题是已经建立了一些没有角度的东西，我也必须包括它们
问题是这样的。
我的 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 文件。我知道如何使用 firebug/chrome-dev-tool，但我什至看不到正在发出的网络请求。我究竟做错了什么？
我知道 angular 对脚本标签有一些特殊的含义。我可以覆盖它吗？
接受的答案不适用于 1.2.0-rc1+ ( Github issue )。
这是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"用作脚本的类型，您可以在部分中延迟加载：
<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 中，但不会加载 javascript 路径。我怀疑这是因为我试图加载的 javascript 来自不同的域/协议。所以我采取了不同的方法，这就是我想出的，以谷歌地图为例：（要点）
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');
});
}
}
};
}]);
我希望它对某人有帮助。
我使用此方法动态加载脚本文件（在控制器内）。
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "https://maps.googleapis.com/maps/api/js";
document.body.appendChild(script);
从 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);
}
}]);
不是有史以来最好的解决方案，但是，嘿，在后续视图中放置脚本标签也不是。就我而言，我必须这样做是为了使用 Facebook/Twitter/等。小部件。
ocLazyLoad允许通过路由器（例如 ui-router）在模板/视图中延迟加载脚本。这是一个片段
$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();
}]
}
});
要从 a 动态加载 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 = '<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>
我尝试明确使用 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));
}
不幸的是，这篇文章中的所有答案都对我不起作用。我不断收到以下错误。
无法在“文档”上执行“写入”：除非显式打开，否则无法从异步加载的外部脚本写入文档。
我发现如果您使用一些也调用其他外部 JavaScript 文件并尝试插入 HTML 的 3rd 方小部件（在我的情况下为 demandforce），就会发生这种情况。查看控制台和 JavaScript 代码，我注意到这样的多行：
document.write("<script type='text/javascript' "..."'></script>");
我使用了来自： https ://github.com/krux/postscribe 的第 3 方 JavaScript 文件（htmlParser.js 和 postscribe.js）。这解决了这篇文章中的问题并同时修复了上述错误。
（在我现在紧迫的最后期限内，这是一种快速而肮脏的方法。但是，我对使用 3rd 方 JavaScript 库感到不舒服。我希望有人能想出一个更干净、更好的方法。）