Как определить контроллер Angularjs после загрузки скрипта?

Я пытаюсь «угнетать» код в this руководство по быстрому старту о том, как использовать Google Calendar api.Как определить контроллер Angularjs после загрузки скрипта?

У меня есть следующий код. На данный момент я просто пытаюсь найти страницу, которая говорит true, если пользователь должен войти в Google и false, если они уже есть.

<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>

Проблема заключается в том, что gapi.auth.authorize часть дает мне ошибку, потому что он пытается запустить до того client.js загружен.

Ожидаемый способ решения этой проблемы - использовать функцию обратного вызова. Так что я попытался

<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>

но теперь я получаю сообщение об ошибке, потому что контроллер не определен, когда <body ng-controller="calController"> попытки запуска.

Любые советы о том, как правильно это сделать, будут оценены.

источник

2016-07-21 quantumbutterfly

, что конкретно это первая ошибка? Этот скрипт должен быть хорошо загружен до того, как контроллер когда-либо будет запущен – charlietfl

'TypeError: Невозможно прочитать свойство 'authorize' undefined на новом calController (angularindex.html: 12) at Object.invoke (angular.min.js: 41) at R (angular.min.js: 89) при m (угловой.min.js: 65) при g (угловой.min.js: 58) при g (угловой.min.js: 58) при угловых .min.js: 58 at angular.min.js: 20 at m. $ eval (angular.min.js: 145) at m. $ apply (angular.min.js: 145) ' – quantumbutterfly

Я не получаю это .. скрипты загружаются синхронно, поэтому я не знаю, почему вы столкнулись с проблемой. Вы можете вставить ошибку? –

Вы не можете определить контроллер после начальной загрузки

попробовать

<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>

источник

2016-07-21 04:30:18

Вы можете попробовать вручную самонастройки вашего приложения обратного вызова

<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>

источник

2016-07-21 04:07:55

Что вы подразумеваете под этим? Извините, я новичок в javascript и угловом – quantumbutterfly

Вы можете определить угловой модуль и контроллер в любой точке, если вы не загрузите угловое число, не запустили –

, поэтому я попробовал код, который вы отправили, но теперь тело просто буквально показывает '{{needslogin}}' вместо true или false – quantumbutterfly

Как определить контроллер Angularjs после загрузки скрипта?

ответ

Смежные вопросы