AngularJS - 将第三方asynchronic加载库作为服务包装

Question

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

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

目前我的做法是这样的：

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中。此角度服务返回一个promise，您可以在库完全加载时解析它。

您的doStuff功能类似于：

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

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

在您的控制器中，您使用then()功能来处理结果。

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

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