Wie definiere ich einen Angularjs-Controller, nachdem ein Skript geladen wurde?

Ich versuche, den Code in this Quickstart Guide auf, wie man den Google Kalender API verwenden.Wie definiere ich einen Angularjs-Controller, nachdem ein Skript geladen wurde?

Ich habe den folgenden Code. Im Moment versuche ich nur, eine Seite zu haben, die sagt true, wenn der Benutzer bei Google angemeldet sein muss, und false, wenn sie bereits haben.

<html ng-app="calApp"> 
<head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script> 
    <script src="https://apis.google.com/js/client.js"></script> 
    <script type="text/javascript"> 

     var app = angular.module("calApp",[]); 

     app.controller('calController',function calController($scope){ 
      gapi.auth.authorize({ 
       'client_id': 'asdfghjkl123456', 
       'scope': 'https://www.googleapis.com/auth/calendar.readonly', 
       'immediate': true 
      }, function(authResult){ 
       if (authResult && !authResult.error) { 
        $scope.needslogin = false; 

       }else{ 
        $scope.needslogin = true; 
       } 
      }); 
     }); 

    </script> 
</head> 
<body ng-controller="calController"> 
     {{needslogin}} 
</body> 
</html>

Das Problem ist, dass der gapi.auth.authorize Teil mir einen Fehler gibt, weil es zu laufen versucht, bevor client.js geladen ist.

Der erwartete Weg, dies zu lösen, ist die Verwendung einer Callback-Funktion. So versuchte ich

<script src="https://apis.google.com/js/client.js?onload=defineController"></script> 
<script type="text/javascript"> 

    var app = angular.module("calApp",[]); 

    function defineController(){ 
     app.controller('calController',function calController($scope){ 
      gapi.auth.authorize({ 
       'client_id': 'asdfghjkl123456', 
       'scope': 'https://www.googleapis.com/auth/calendar.readonly', 
       'immediate': true 
      }, function(authResult){ 
       if (authResult && !authResult.error) { 
        $scope.needslogin = false; 

       }else{ 
        $scope.needslogin = true; 
       } 
      }); 
     }); 
    } 
</script>

aber jetzt bekomme ich einen Fehler, da die Steuerung nicht definiert ist, wenn <body ng-controller="calController"> Versuche auszuführen.

Irgendwelche Tipps, wie man dies richtig macht, würde geschätzt werden.

Quelle

2016-07-21 quantumbutterfly

was ist speziell der erste Fehler? Das Skript sollte geladen haben, bevor der Controller überhaupt ausgeführt wird – charlietfl

'TypeError: Kann die Eigenschaft 'authorize' von undefined nicht lesen am neuen calController (angularindex.html: 12) bei Object.invoke (angular.min.js: 41) bei R Beispiel (Winkel.min.js: 89) bei m (Winkel.min.js: 65) bei g (Winkel.min.js: 58) bei g (Winkel.min.js: 58) bei Winkel .min.js: 58 bei angular.min.js: 20 bei m. $ eval (angular.min.js: 145) bei m. $ apply (angular.min.js: 145) ' – quantumbutterfly

bekomme ich nicht Es .. Skripte sind synchron geladen, so dass ich nicht weiß, warum Sie Probleme haben. Kannst du den Fehler einfügen? –

Sie können Ihren Controller nicht festlegen, nach Bootstrap

versuchen

<script src="https://apis.google.com/js/client.js?onload=gapiBootCallback"></script> 
<script type="text/javascript"> 

    var gapiBootStrapper = {}; // an object that you can attach a callback function to in the controller 

    var app = angular.module("calApp", []).constant('gapiBootStrapper', gapiBootStrapper); // Passing it into Angular as a constant is not necessary but stop us using global from within a controller 

    function gapiBootCallback() { 
     gapi.auth.authorize({ 
      'client_id': 'asdfghjkl123456', 
      'scope': 'https://www.googleapis.com/auth/calendar.readonly', 
      'immediate': true 
     }, function (authResult) { 
      if (authResult && !authResult.error) { 
       gapiBootStrapper.callback(false); 
      } else { 
       gapiBootStrapper.callback(true); 
      } 
     }); 
    } 

    app.controller('calController', function calController($scope, $timeout, gapiBootStrapper) { 
     gapiBootStrapper.callback = function (needslogin) { 
      $timeout(function() { // Use $timeout so we don't need to call $scope.$apply 
       $scope.needslogin = needslogin; 
      }); 
     }; 
    }); 
</script>

Quelle

2016-07-21 04:30:18

können Sie versuchen, manuell Ihre Anwendung in dem Aufruf von Bootstrap zurück

<html> 

<head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script> 
    <script type="text/javascript"> 

     var app = angular.module("calApp",[]); 

     app.controller('calController',function calController($scope){ 
      gapi.auth.authorize({ 
       'client_id': 'asdfghjkl123456', 
       'scope': 'https://www.googleapis.com/auth/calendar.readonly', 
       'immediate': true 
      }, function(authResult){ 
       if (authResult && !authResult.error) { 
        $scope.needslogin = false; 

       }else{ 
        $scope.needslogin = true; 
       } 
      }); 
     }); 
     var callback = function() { 

      angular.bootstrap(document, ['calApp']); 
     };   
    </script> 
    <script src="https://apis.google.com/js/client.js?onload=callback"> </script> 

</head> 

<body ng-controller="calController">{{needslogin}} 
</body> 

</html>

Quelle

2016-07-21 04:07:55

Was meinst du damit? Sorry, ich bin neu in Javascript und eckig – quantumbutterfly

Sie könnten das Winkelmodul und Controller an jedem Punkt definieren, es sei denn Sie Bootstrap der Winkel würde nicht laufen –

ok, also habe ich versucht, den Code, den Sie gepostet, aber jetzt der Körper nur wörtlich zeigt '{{needslogin}}' anstelle von wahr oder falsch – quantumbutterfly

Wie definiere ich einen Angularjs-Controller, nachdem ein Skript geladen wurde?

Antwort

Verwandte Themen