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

Question

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

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

初始化 Lock 小部件：

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();
}

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

1. 初始状态 - 在按下任何东西之前 (HomePage before pressing the login button)
2. 按下登录按钮后 (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。