AngularJS:如何在ng-include中创建角度加载脚本？
嘿，我正在用angular建立一个网页。问题是有些东西已经没有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对脚本标签有一些特殊的意义。我可以覆盖它吗？
回答 8
Stack Overflow用户
发布于 2013-11-19 21:31:26
被接受的答案不会从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>Stack Overflow用户
发布于 2012-08-30 23:37:15
简而言之: AngularJS ("jqlite")不支持这一点。在你的页面上包含jQuery (在包含Angular之前)，它应该可以工作。请参阅https://groups.google.com/d/topic/angular/H4haaMePJU0/discussion
Stack Overflow用户
发布于 2013-11-01 03:46:55
我尝试了neemzy的方法，但它不适用于我使用1.2.0-rc.3。script标记将被插入到DOM中，但是javascript路径不会被加载。我怀疑这是因为我试图加载的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');
});
}
}
};
}]);我希望这对某些人有帮助。
https://stackoverflow.com/questions/12197880
复制相似问题
腾讯云开发者
