javascript - AngularJS - 将第 3 方异步加载库包装为服务

Question

我有一个异步加载到我的页面的第 3 方库，我想将它用作服务。

如何将加载代码包装在 Angular 服务中？一般来说，最佳做法是什么？

目前我的做法是这样的:

angular.module('myAPIServices', []).
factory('MyAPI', function () {
    return {
        \\ API is declared at the loaded script
        doStuff:function(){$window.API.doStuff()} 
    };
});

然后在 Angular 范围之外的页面上

(function () {
    var js = document.createElement('script');
    var loc = document.getElementsByTagName('script')[0];
    js.async = true;
    js.src = "myAPI.js";
    loc.parentNode.insertBefore(js, loc);
}());

Answer 1

一种可能性是将您的库调用包装在 $q 中.这个 Angular 服务返回一个 promise ，您可以在库完全加载时解决这个问题。

您的 doStuff 函数类似于:

doStuff: function() {
   var deferred = $q.defer();

   myAsyncCall().success(function(data) {
      deferred.resolve(data);
   });
   return deferred.promise;
}

在您的 Controller 中，您使用 then() 函数来处理结果。

第二种可能性是回调。这是一个 example两种类型。

如果您的库正在操作 DOM，最好将其包装在一个指令中。