Angular指令链接函数onload

我正在构建像这样的AngularJS指令。我想创建一个可重用的小部件，可以从Google Analytics中提取数据并创建量表图表，但我坚持了第一步。Angular指令链接函数onload

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 =”完全不起作用？你能帮助我吗？谢谢。

来源

2014-04-01 fuermosi777

由于Google API看起来是附加在窗口对象上的函数，所以您需要在窗口范围内创建函数。在你的指令中使用依赖注入来得到$ 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); 
     } 
     ..... 
    } 
    } 

}]);

来源

2014-04-02 02:36:45

非常感谢你！这真的很有帮助！ – fuermosi777

我有一些其他功能链接到handleClientLoad（），我应该添加$窗口。所有的前缀？谢谢。 – fuermosi777

不需要为链接到handleClientLoad（）的函数添加$ window前缀，因为google API将单独查找应该在窗口范围内的handleClientLoad（）。如果它帮助你，请随时将其标记为正确答案。 –

handleClientLoad是一个私人功能。作为快速修复，请将window.handleClientLoad = handleClientLoad添加到您的链接功能中。

来源

2014-04-01 19:17:57 lib3d

谢谢。它激发了我，我通过添加一个'window.onLoad = handleClientLoad（）'来解决这个问题。 – fuermosi777

Angular指令链接函数onload

回答

相关问题