javascript - 对话框的 Url 不适用于 angular.bootstrap(无限 $digest 循环)

Question

我有一个平均堆栈网站。我想用 ExecuteFunction在对话框中绑定(bind)一个按钮来启动这个网站:

function doSomethingAndShowDialog(event) {
    clickEvent = event;
    Office.context.ui.displayDialogAsync("https://localhost:3000/try", {}, function () {})
}

单击该按钮会打开一个带有以下 url 的对话框，它会显示页面的内容:

https://localhost:3000/try?_host_Info=excel|web|16.00|en-us|7fe9b4e9-d51e-bea5-d194-c817bc5ed4bc|isDialog#%2Ftry%3F_host_Info=excel%7Cweb%7C16.00%7Cen-us%7C7fe9b4e9-d51e-bea5-d194-c817bc5ed4bc%7CisDialog

但是，在控制台中，有Error: $rootScope:infdigInfinite $digest Loop在 angular.bootstrap(document, ['myapp']):

var wait = setTimeout(myFunction, 1000);
Office.initialize = function (reason) {
    $(document).ready(function () {
        angular.bootstrap(document, ['myapp']) 
        console.log("bootstrapped inside Office.initialize");
        clearTimeout(wait);
    })
}

function myFunction () {
    $(document).ready(function () {
        angular.bootstrap(document, ['myapp']) 
        console.log("bootstrapped outside Office.initialize");
    })
}

app = angular.module("myapp", []);
app.config(...);
app.controller(...);

如果我们直接在浏览器中打开https://localhost:3000/try，是没有错误的。

有谁知道为什么那个长 url 不能用于 angular.bootstrap？我们该如何解决这个问题？

编辑 1:https://localhost:3000/try?_host_Info=excel... 的控制台屏幕截图。请注意，bootstrapped inside Office.initialize 和 bootstrapped outside Office.initialize 均未显示。但是如果我在浏览器中运行 https://localhost:3000/try，当我从 Excel 客户端调用它时，我只会看到 bootstrapped outside Office.initialize，我只会看到 在 Office.initialize 中引导。

Answer 1

听起来您正在尝试连接一个可以作为加载项或独立页面运行的页面。只要有可能，最好为每个用例维护单独的 View 。如果不出意外，它会让一切变得更加直接。将它们结合起来可能会产生更多的开销和麻烦，这是值得的。

这里的部分问题是您有两个独立的代码路径，并且您假设一次只会执行一个路径。当在浏览器中加载时，这是真的，它会简单地忽略 Office.initialize 函数。然而，当在 Office 中加载时，它将执行两个路径。一个会被Office执行，另一个会在1秒后被setTimeOut执行。

如果您有两个不同的代码路径，其中只有一个被执行过，则您需要进行测试以确定您是作为加载项还是作为独立页面运行。这是那些查询参数发挥作用的地方。如果您定义了 _host_Info 查询参数，那么您就是在 Office 中操作。例如:

if (getParameterByName('_hostInfo')) { // _hostInfo is defined
    Office.initialize = function (reason) {
        $(document).ready(function () {
            angular.bootstrap(document, ['myapp'])
            console.log("bootstrapped inside Office.initialize");
        });
    }
} 
else { // _hostInfo is not defined
    $(document).ready(function () {
        angular.bootstrap(document, ['myapp'])
        console.log("bootstrapped outside Office.initialize");
    })
}

请注意，getParameterByName() 是从 this answer 中提取的函数.不过，您可以使用任何您喜欢的方法。