Angular JS - 根据对方添加库

我发现此线程How to handle multiple JS libraries with different loading times in Angular?，我正在使用它将d3.js添加到我的头文件中。我现在必须添加d3.legend.js。我将如何以回调方式完成此操作？Angular JS - 根据对方添加库

var _libraries: [ 
    'scripts/d3.min.js', 
    'scripts/moment.min.js' 
] 

for (var i = 0, len = _libraries.length; i < len; i++) { 
    var s = document.createElement('script'); 
    s.type = 'text/javascript'; 
    s.src = _libraries[i]; 

    document.body.appendChild(s); 
}

希望这有助于：

var d3js = angular.module('d3', []); 

d3js.factory('d3Service', ['$document', '$q', '$rootScope', '$window', 
    function($document, $q, $rootScope, $window) { 
     var d = $q.defer(); 

     function onScriptLoad() { 
      // Load client in the browser 
      $rootScope.$apply(function() { d.resolve($window.d3); }); 
     } 
     // Create a script tag with d3 as the source 
     // and call our onScriptLoad callback when it 
     // has been loaded 

     var scriptTag = $document[0].createElement('script'); 
     scriptTag.type = 'text/javascript'; 
     scriptTag.async = true; 
     scriptTag.src = 'lib/d3.v3.js'; 

     scriptTag.onreadystatechange = function() { 
      if (this.readyState == 'complete') onScriptLoad(); 
     } 

     scriptTag.onload = onScriptLoad; 

     var s = $document[0].getElementsByTagName('body')[0]; 
     s.appendChild(scriptTag); 

     //this is now where I have to add d3.legend.js which depends on the successful loading of d3.js. 

     return { 
      d3: function() { return d.promise; } 
     }; 

    }]);

来源

2015-07-10 Timothy Dalton

最初的想法的一个简化版本：

var app = angular.module('SomeApp', []); 
app.factory('LibraryFactory', function() { 
    var factory = {}; 

    factory.getD3 = function(callback) { 
     if(!window.d3) { 
      var script = document.createElement("script"); 
      script.src = "https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.9/d3.min.js"; 
      document.head.appendChild(script); 
      script.onload = function() { 
       callback(window.d3); 
      }; 
     } else { 
      callback(window.d3); 
     } 
    }; 

    factory.getD3Legend = function(callback) { 
     if(!window.d3.legend) { 
      //...ditto 
     } 
    }; 

    return factory; 
});

，并使用工厂（例如，在控制器）可以连锁调用：

app.controller('SomeTrialCtrl', function ($scope, LibraryFactory) { 

    LibraryFactory.getD3(function (d3) { 
     LibraryFactory.getD3Legend(function (d3WithLegend) { 
      // place code using the libraries here 
     }); 
    }); 
});

或者在案件在d3.legend中，factory.getD3Legend函数可以在内部调用getD3函数以使事情更简单。像：

factory.getD3Legend = function(callback) { 
    factory.getD3(function(d3) { 
     if(!d3.legend) { 
      //...ditto 
     } 
     callback(d3); 
    } 
};

无论如何，这是基本的想法。 @Aarosil在原帖中的回答可能是更正确的。

来源

2015-11-25 21:59:43

我只是通过我需要添加和下面一个透视其添加到代码库一个的阵列循环。

来源

2015-07-10 12:53:42

Angular JS - 根据对方添加库

回答

相关问题