使用 Angular 时如何在内联页面容器中显示 Auth0 Lock？

Question

我正在使用 Auth0 Lock 对用户进行身份验证，我正在尝试让 Lock 小部件不是作为弹出窗口而是嵌入在页面本身中。

我尝试使用 container 选项并从我希望它加载的页面中的脚本调用 lock.show() 方法，但它没有。只有当我从 ng-click 中的函数内部调用 lock.show() 方法时，它才会显示小部件。

正在初始化锁定小部件：

lockProvider.init({
        clientID: 'XXX',
        domain: 'YYY.auth0.com',
        options: {
            allowSignUp: false,
            container: 'hiw-login-container',
            auth: {
                responseType: 'token',
                params: {
                    scope: 'openid email'
                }
            },
            allowedConnections: ['Username-Password-Authentication']
        }
    });

观点：

 <div ng-if="!isAuthenticated" >
   <script>
       lock.show();
    </script>
    <md-content>
        <div id="hiw-login-container" style="width: 320px; margin: 40px auto; padding: 10px; border-style: dashed; border-width: 1px; box-sizing: border-box;">
             embedded area
         </div>
     </md-content>
 </div>

从 ng-click 调用 lock.show:

<md-button class="md-warn md-raised"
           aria-label="Login"
           ng-click="toolbar.authService.login()"
           ng-if="!isAuthenticated">
  Login
</md-button>

function login() {
    lock.show();
}

我无法上传图片，所以这里是运行应用程序显示结果的链接：

初始状态 - 在按下任何按钮之前 (HomePage before pressing the login button)
按下登录按钮后(HomePage after pressing login button)

为什么它不从一开始就显示小部件？

Answer 1

您正在使用 Angular，因此任何依赖于其渲染管道的 Javascript 代码，因为它使用由 Angular 本身管理的 HTML 元素遵守这些规则。

当您从 ng-click 调用它时 Angular 已经完成了它的工作，Lock 将正确找到目标元素并正确显示。

当您尝试从内联脚本调用 lock.show 时，您无法保证 Angular 已经完成处理并且不会正常工作。

您需要从 Angular 感知的代码调用 lock.show；你可以考虑一些事情：

function YourController($scope) {
   $scope.$on('$viewContentLoaded', lock.show);
}

或

angular.element(lock.show);

甚至考虑使用一个指令来理解 Angular 何时使 HTML 元素可用并调用 lock.show.

使用 Angular 时如何在内联页面容器中显示 Auth0 Lock？

How to show Auth0 Lock in an inline page container when using Angular?

javascript

angularjs

auth0