AngularJS：触发从子窗口加载视图（OAuth）答案

【问题标题】：AngularJS: triggering view loading from child window (OAuth)AngularJS：触发从子窗口加载视图（OAuth）
【发布时间】：2015-02-26 11:31:16
【问题描述】：

我几乎可以肯定这是实现我的目标的最佳实践（在 AngularJS 中管理 OAuth），但这是我所做的和不起作用的：

通过使用 Hello.js（通过 angular-global-injector 在 Angular 中注入），我设法通过使用以下代码在我的 controllers.js 文件中。

  hello.init({
        google: MY_APPLICATION_ID
    },{redirect_uri:'app/_partials/'});

     $scope.doLogin = function(network) {
         console.log('Calling hello ' + network);
         hello.login(network,function(r){ // callback
            console.log("login successful..");
         });
     };

带有登录请求的弹出窗口打开（请注意，我必须使用“假” index.html 视图，因为 $routerProvider 似乎无法在子窗口上的 URI-redict 上正常工作（页面未找到，但URI / auth 将在父窗口上正常工作..因为所有其他路由器都可以完美地在它上面工作。所以我不能只猜测问题出在子窗口上。）。这种方式反而加载了 index.html，因为重定向是在 AngularJS 不存在时完成的。

这是我的路线配置。

    $routeProvider.
        when("/userLogin", {templateUrl: "_partials/userLogin.html", controller: "webClientController"})
        .when("/dialInterface", {templateUrl: "_partials/dialInterface.html", controller: "webClientController"})
        .when("/error404", {templateUrl: "_partials/error404.html", controller: "webClientController"})
        .otherwise({redirectTo: '/error404'});

这是我的弹出窗口的内容（假的“index.html”）。

<!-- temp workaround to manage oAuth since routeProvider doesn't match the REDIRECT URI correctly -->

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
    $("#go-to-dial-interface",opener.document).trigger('click');
    window.close();
</script>

这是视图的代码（由 AngularJS 正确加载）/userLogin

<md-content class="md-padding md-primary" style="height: 600px;padding: 24px;" layout-fill>
    <a ng-click="doLogin('google')" class="zocial googleplus">Sign in with Google+</a>
</md-content>


<a id="go-to-dial-interface" href="#dialInterface" style="visibility:hidden;"></a>

基本上逻辑（和问题）是：

用户点击 a 标记会导致执行 doLogin('google')（这会调用控制器中包含对 Hello 的调用的函数。 js)
选择了一个 Google 帐户，然后进行重定向（在本例中为“假” index.html，因为我不使用 Angular 路由管理它
此 index.html 在 OAuth 弹出窗口中正确加载，并且 javascript 代码正确执行：触发 go-to-dial-interface 的 click() 事件并关闭 OAuth 弹出窗口
触发的 click() 事件应该会在主窗口中导致重定向到新视图 (#dialInterface)，但它不会：当前视图 (userLogin) 被重新加载（或者可能不是......）并且新的没有（当然浏览器地址栏中的网址不会改变）

任何更好的解决方案/改进也很受欢迎。

提前谢谢你

【问题讨论】：

标签： javascript angularjs oauth

【解决方案1】：

您是否也为 /dialInterface 视图准备好了 webClientController？任何控制台错误？

【讨论】：

您遇到的错误可能是因为您在任何地方都没有 webClientController（但您的代码需要它）或者它存在一些问题。准备好意味着它已经创建：已写入；脚本文件被加载到 DOM 中；一个角度模块已被实例化； webClientController 已附加到该模块；等
视图附加了一个控制器。确实“根”视图（useLogin）正在正确加载，如果我手动输入另一个视图的名称（如#/somepage）并设置路由它就可以正常工作