Question

我对角度很新，并尝试将其与google earth的JavaScript API集成。

我已经完成了两项工作，但从未尝试过将它们结合使用。我的动机是以有角度的方式使用谷歌地球模块，控制器等操纵地图。

http://www.ng-newsletter.com/posts/d3-on-angular.html

我希望谷歌模块可以像上面链接中的d3模块一样通过加载脚本的工厂来使用。然后可以在加载脚本时使用谷歌模块。

我已经将它与d3模块配合使用了：

angular.module('d3', [])
.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 {
            d3: function(){ return d.promise; }
        };
    }]);

然后可以通过指令获得：

    .directive('d3Bars', ['$window', '$timeout', 'd3Service',
    function($window, $timeout, d3Service) {
        return {
            restrict: 'A',
            scope: {
                data: '=',
                label: '@',
                onClick: '&'
            },
            link: function(scope, ele, attrs) {
                d3Service.d3().then(function(d3) {
                    //code...
            }}
    }]);

我尝试重写此内容以加载google loader JS模块https://developers.google.com/loader/：

然后替换＆＃34; d3＆＃34;使用＆＃34; google＆＃34;。和ofc scripTag.src变量。这应该是正确的吗？

function onScriptLoad() {
// Load client in the browser
      $rootScope.$apply(function() { d.resolve($window.google); });
}

然后我有一个简单的指令，我想使用google JS对象加载地球api。＆＃34; getApi＆＃34; -module类似于＆＃34; d3service＆＃34;在上面的d3工厂。

    .directive('mapFrame' ['$window', '$timeout', 'getApi',
    function($window, $timeout, getApi) {
        return {
            restrict: 'E',
            scope: {},
            link: function(scope, elements, attrs) {
                getApi.google().then(function(google) {
                    console.log(google);
                    google.load("earth", "1");
                    //more code..
                });
            }
        }
}])

在html文件中：

<div map-frame></div>

这种方式适用于d3。我将脚本加载到DOM中，并且可以显示一些图表，这似乎与谷歌模块无关。看起来该指令永远不会调用工厂，因为javascript永远不会加载到DOM中。

我错过了什么，或者甚至不可能？

谢谢！

将Google Earth JS API与AngularJS集成

0 个答案: