GAE/Angular 应用程序中 window.init() 的无限循环

Question

我正在使用带有 AngularJS 的 cloud enpoints 演示，并且在加载 client.js 后，我使用他们建议的运行授权的方法遇到了无限循环。这是建议的方法。

首先，在所有其他脚本标签之后（对于 Angular 和其他 JS 文件，我正在这样做）：

<script>
    function init() {
        window.init();
    }
</script>
<script src="https://apis.google.com/js/client.js?onload=init"></script>

然后，在控制器中，我像这样处理窗口初始化：

    $window.init = function () {
        // Loads the OAuth and helloworld APIs asynchronously, and triggers login
        // when they have completed.
        var apisToLoad;
        var callback = function () {
            if (--apisToLoad == 0) {
                googleAPI.signin(true,
                    googleAPI.userAuthed);
                appContext.appReady = true;
                alert('loaded');
            }
        }

        apisToLoad = 2; // must match number of calls to gapi.client.load()
        gapi.client.load('helloworld', 'v1', callback, googleAPI.apiRoot);
        gapi.client.load('oauth2', 'v2', callback);
    };

我认为我发现这里存在竞争条件，其中 $window.init 没有足够早地设置，所以我最终得到以下消息：

未捕获的 RangeError：超出最大调用堆栈大小

这是因为“window.init()”只是回调了init()函数，超出了栈。

关于如何更好地处理这个问题有什么建议吗？谢谢。

Answer 1

通过这样做，您是在告诉 window.init 调用自身，从而创建一个无限循环。

<script>
    function init() {
        window.init();
    }
    init===window.init; // => true
</script>
<script src="https://apis.google.com/js/client.js?onload=init"></script>

如果您更仔细地查看my code，您会发现我对函数的命名不同，如下所示：

<script>
    function init() {
        window.initGapi();
    }
    init===window.initGapi; // => false
</script>
<script src="https://apis.google.com/js/client.js?onload=init"></script>

然后在你的控制器中简单地定义initGapi：

$window.initGapi = function () {}

接受答案的 cmets 中的代码等到加载 api 以引导应用程序，这需要更长的时间。

Answer 2

把它放在“我错过了一些非常基本的东西”的箱子里：

我注意到我在控制器定义中忘记了一些内容：

topNavBar.$inject = ['$location', 'appContext', 'logger'];
function topNavBar($location, $window, appContext, logger) {

注意，注入中没有“$window”，因此它得到了 appContext 的定义，并且执行“$window.init =”完全没有效果。

Answer 3

第一行在这里创建了一个无限循环，因为您在实际的 window.init 中调用了 window.init。

<script>
    /**
     * Initializes the Google API JavaScript client. Bootstrap the angular module after loading the Google libraries
     * so that Google JavaScript library ready in the angular modules.
     */
    function init() {
        gapi.client.load('conference', 'v1', null, '//' + window.location.host + '/_ah/api');
        gapi.client.load('oauth2', 'v2', callback);
    };
</script>
<script src="//apis.google.com/js/client:plusone.js?onload=init"></script>

你可以试试这个代码，看看是否对你更有意义

Answer 4

看起来你的角度控制器没有及时加载/执行，不知道为什么，但你可以等待文档准备好，以真正的 jQuery 方式：

function init() {
    angular.element(document).ready(function() {
        window.init();
    });
}

到那时 Angular 应该已经完成​​加载了。