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中。这个角度服务返回一个承诺，您可以在库完全加载时解决该承诺。

你的doStuff函数会是这样的：

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

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

在您的控制器中，您使用该then()函数来处理结果。

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

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