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

我正在使用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']
        }
    });

观点：

lock.show（）；
嵌入区

调用

lock。从
ng单击显示
：


登录
函数登录（）{
lock.show（）；
}

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

初始状态-按下任何键之前（）
按下登录按钮（）
为什么不从一开始就显示小部件？
您使用的是Angular，因此任何依赖于其呈现管道的Javascript代码，因为它使用由Angular自身管理的HTML元素，都需要按照这些规则进行播放

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

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

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

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

或

或甚至考虑执行一个指令，当角度已经使HTML元素可用，并调用<代码>锁定时，显示 .< /P>非常感谢！非常好，您的解释非常清楚：）我遇到了一个新问题-在ContainerManager.sure（）中找不到id为hiw login container的元素，它适用于登录，但如果我注销，它将不再显示容器-在原始代码中，您将
hiw login container
元素放置在条件
if
中，这意味着仅当用户未经过身份验证时才呈现容器。这可能是原因吗？也许，我尝试了不同的登录路径，因此div上没有条件，但它会一起停止工作，我不知道为什么。
angular.element(lock.show);