title: Angular directive link functions onload
body: <p>I am building an AngularJS directive like this. I want to make a reusable widget that can extract data from Google Analytics and create a gauge chart, but I am stuck at the first step.</p>
  
  <pre><code>dashboardApp.directive('organicSearchGauge', function() {
  return {
      scope: {
          color: '='
      },
      restrict: 'AE',
      replace: true,
      template: '&lt;div id="xxx"&gt;&lt;/div&gt;',
      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);
          } ...
  </code></pre>
  
  <p>The following functions are auth2.0 and making the API call, and I was supposed to write the data I get from the GA into <code>&lt;div id="xxx&gt;&lt;/div&gt;</code>.</p>
  
  <p>In the HTML file, I have a <code>&lt;script&gt;</code> like this:</p>
  
  <pre><code>&lt;script src="https://apis.google.com/js/client.js?onload=handleClientLoad"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>so that I can load GA API library and start the handleClientLoad() function. But the directive does not work.</p>
  
  <p>I guess the problem is the first <code>handleClientLoad()</code>, because I inserted a <code>Document.ElemenyByID().innerHTML</code> to test whether this function works and it turns out that it doesn't. So I guess that the "onLoad=" in <code>&lt;script&gt;</code> tag doesn't work at all? Can you help me with this? Thank you.</p>