我正在尝试使用 AngularJS Promise 动态加载一些 JavaScript。
HTML 文件 (index.html)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular-route.js"></script>
<script type="text/javascript" src="main.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="main">
<ng-view></ng-view>
</body>
</html>
AngularJS 文件(main.js)
angular.module('main', ['ngRoute'])
.config(function($routeProvider) {
$routeProvider
.when('/',
{
controller: 'MainCtrl',
templateUrl: 'partial.html',
resolve: {
temp: MainCtrl.testFn
}
})
.otherwise({
redirectTo: '/'
})
})
MainCtrl = angular.module('main')
.controller('MainCtrl', function () {
});
angular.module('main')
.factory('MyFactory', function($q) {
data = {
loadJS: function() {
var deferred = $q.defer()
var script = document.createElement('script');
script.type = 'text/javascript'
script.src = 'https://apis.google.com/js/client.js'
script.onload = function() {
deferred.resolve('Google Client Library loaded')
}
document.body.appendChild(script)
return deferred.promise
}
}
return data
})
MainCtrl.testFn = function($log, MyFactory) {
return MyFactory.loadJS().then(function(result) {
$log.debug(result)
gapi.client.load()
})
}
onload 方法被调用(当 promise 被解析并打印调试行时)，但由于在gapi上找不到客户端属性而引发错误(未捕获类型错误:无法读取未定义的属性“load”)。
我错过了什么？有没有人有更好的方法使用 Angular Promise 动态加载 JS(仅使用 Angular 和 JS)？
最佳答案
我猜，脚本已成功加载，但gapi.client 无法立即可用。为此，您需要向 google api url 提供处理程序(某些全局函数)。
angular.module('app', [])
.controller('mainCtrl', function(googleClientLoader) {
googleClientLoader.load().then(
function() {
console.debug(gapi.client);
}
)
})
.factory('googleClientLoader', function($q) {
return {
load: function() {
var deferred = $q.defer()
var script = document.createElement('script');
script.type = 'text/javascript'
script.src = 'https://apis.google.com/js/client.js?onload=handleClientLoad';
window.handleClientLoad = function() {
deferred.resolve('Google Client Library loaded');
}
document.body.appendChild(script)
return deferred.promise;
}
}
})
关于javascript - AngularJS 通过源标签动态加载普通的旧 Javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27728961/