使用Angular时如何在嵌入式页面容器中显示Auth0锁定？

我正在使用Auth0 Lock来验证用户身份，并且尝试使Lock小部件不是弹出窗口而是嵌入页面本身。

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

初始化锁小部件：

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>

调用lock.show来自ng-click：

<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）
2. 按下登录按钮后（按下登录按钮后为主页）

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