Question

我正在构建一个像这样的AngularJS指令。我想制作一个可重复使用的小部件，它可以从Google Analytics中提取数据并创建一个计量表，但我在第一步就陷入困境。

dashboardApp.directive('organicSearchGauge', function() {
return {
    scope: {
        color: '='
    },
    restrict: 'AE',
    replace: true,
    template: '<div id="xxx"></div>',
    link: function(scope, elem, attrs) {
        var clientId;
        var apiKey = 'xxx'
        var scopes = 'https://www.googleapis.com/auth/analytics.readonly';

        function handleClientLoad() {
            gapi.client.setApiKey(apiKey);
            window.setTimeout(checkAuth, 1);
        } ...

以下函数是auth2.0并进行API调用，我应该将从GA中获得的数据写入<div id="xxx></div>。

在HTML文件中，我有<script>，如下所示：

<script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>

这样我就可以加载GA API库并启动handleClientLoad（）函数。但该指令不起作用。

我想这个问题是第一个handleClientLoad()，因为我插入了一个Document.ElemenyByID().innerHTML来测试这个函数是否有效，结果证明它没有。所以我想<script>标签中的“onLoad =”根本不起作用？你能帮帮我吗？谢谢。

Answer 1

当Google API查看附加到窗口对象的函数时，您需要在窗口范围中创建该函数。在您的指令中使用依赖注入来获取 $ window 对象引用并在window对象范围中创建函数。还可以使用 $ timeout ，这是处理超时的角度方式。

dashboardApp.directive('organicSearchGauge', ['$window', '$timeout', function($window, $timeout) {
return {
    scope: {
        color: '='
    },
    restrict: 'AE',
    replace: true,
    template: '<div id="xxx"></div>',
    link: function(scope, elem, attrs) {
        var clientId;
        var apiKey = 'xxx'
        var scopes = 'https://www.googleapis.com/auth/analytics.readonly';

        $window.handleClientLoad = function () {
            gapi.client.setApiKey(apiKey);
            $timeout(function(){
               checkAuth();
            }, 1);
        } 
        .....
     }
  }

}]);

Answer 2

handleClientLoad是一个私人功能。作为快速解决方法，请将window.handleClientLoad = handleClientLoad添加到您的链接功能。

Angular指令链接函数onload

2 个答案: