Question

我正在使用d3字云服务，需要在它之前加载d3才能正确加载。因此，在我的services.js页面中，我在单词云服务之前加载d3。

大部分时间都可以使用。但是，偶尔会出现“云”这个词无法正确加载，我会收到错误：

未捕获的ReferenceError：未定义d3（localhost：8080 / lib / d3-word-cloud.js：400）

这是因为服务没有以正确的顺序加载吗？我该怎么做才能纠正这个问题？

编辑：以下代码：

myApp.factory('d3Service', ['$document', '$window', '$q', '$rootScope',
  function ($document, $window, $q, $rootScope) {
    var d = $q.defer(),
    d3service = {
      d3: function() { return d.promise; }
    };
    function onScriptLoad() {
        // Load client in the browser
        $rootScope.$apply(function() { d.resolve($window.d3); });
    }
    var scriptTag = $document[0].createElement('script');
    scriptTag.type = 'text/javascript'; 
    scriptTag.async = true;
    scriptTag.src = 'http://d3js.org/d3.v3.min.js';
    scriptTag.onreadystatechange = function () {
        if (this.readyState == 'complete') onScriptLoad();
    }
    scriptTag.onload = onScriptLoad;

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

    return d3service;
}]);

myApp.factory('d3Cloud', ['$document', '$window', '$q', '$rootScope',
  function ($document, $window, $q, $rootScope) {
    var d = $q.defer(),
    d3cloud = {
      cloud: function() { return d.promise; }
    };
    function onScriptLoad() {
        // Load client in the browser
        $rootScope.$apply(function() { d.resolve($window.d3); });
    }
    var scriptTag = $document[0].createElement('script');
    scriptTag.type = 'text/javascript'; 
    scriptTag.async = true;
    scriptTag.src = '../lib/d3-word-cloud.js';
    scriptTag.onreadystatechange = function () {
        if (this.readyState == 'complete') onScriptLoad();
    }
    scriptTag.onload = onScriptLoad;

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

    return d3cloud;
}]);

Answer 1

不确定原因可能，但解决方法可能是在使用之前检查typeof d3（如果没有，请等待或重新加载）。

如果是网页，为什么不在<script>上加载d3并使用ready / onload方法而不是动态地执行它？

Answer 2

所以我想你想在app启动时做以下事情：

＆＃13;

angular.module('d3CloudApp', [])
  .run(['d3Service', 'd3Cloud', function(d3Service, d3Cloud){
    d3Service.d3()
      .then(function(d3){
        d3Cloud.cloud();
      })
  })]

＆＃13;

应该工作:-)虽然说你在d3Cloud中的第二个决心可能是错误的：

＆＃13;

d.resolve($window.d3);

＆＃13;

应该是这样的：

＆＃13;

d.resolve($window.d3Word);

＆＃13;

d3之前的d3依赖加载

2 个答案: