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

0

Я пытаюсь "уговорить" код в этом руководстве по быстрому запуску о том, как использовать Google Calendar api.

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

<html ng-app="calApp">
<head>
    <script src="/angular.min.js"></script>
    <script src="/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="/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">.

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

  • 0
    что конкретно является первой ошибкой? Этот скрипт должен был загрузиться задолго до того, как контроллер запустится
  • 0
    TypeError: Cannot read property 'authorize' of undefined at new calController (angularindex.html:12) at Object.invoke (angular.min.js:41) at R.instance (angular.min.js:89) at m (angular.min.js:65) at g (angular.min.js:58) at g (angular.min.js:58) at angular.min.js:58 at angular.min.js:20 at m.$eval (angular.min.js:145) at m.$apply (angular.min.js:145)
Показать ещё 3 комментария
Теги:
google-api

2 ответа

1
Лучший ответ

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

пытаться

<script src="/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>
Поделиться
0

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

<html>

<head>
    <script src="/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="/client.js?onload=callback">  </script>

</head>

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

</html>
Поделиться
  • 0
    Что ты имеешь в виду? Извините, я новичок в javascript и угловых
  • 0
    Вы можете определить угловой модуль и контроллер в любой точке, если только вы не загрузите угловой
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню