腳本加載后如何定義Angularjs控制器？

Question

我正在嘗試將本快速入門指南中的代碼“角度化”，以了解如何使用Google Calendar API。

我有以下代碼。 現在，我只是想有一個頁面，說true ，如果用戶需要登錄到谷歌和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">嘗試運行時<body ng-controller="calController"> 。

有關如何正確執行此操作的任何提示將不勝感激。

Answer 1

引導后無法定義控制器

嘗試

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

Answer 2

您可以嘗試在回叫中手動引導您的應用

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

腳本加載后如何定義Angularjs控制器？

問題描述

2 個解決方案

解決方案1
1 已采納 2016-07-21 04:30:18

解決方案2
0 2016-07-21 04:07:55

腳本加載后如何定義Angularjs控制器？

問題描述

2 個解決方案

解決方案1 1 已采納 2016-07-21 04:30:18

解決方案2 0 2016-07-21 04:07:55

解決方案1
1 已采納 2016-07-21 04:30:18

解決方案2
0 2016-07-21 04:07:55