对话框的网址不适用于angular.bootstrap(无限$ digest循环) [英] The Url of dialog box does not work with angular.bootstrap (infinite $digest Loop)

问题描述

我有一个卑鄙的网站.我想使用 ExecuteFunction 绑定一个按钮以在对话框中启动该网站:

I have a mean-stack website. I want to use ExecuteFunction to bind a button to launch this website in a Dialog box:

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

单击该按钮将打开一个对话框，其中包含以下网址，它确实显示了页面的内容:

Clicking on the button opens a dialog box with the following url, it does show the content of the page:

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

但是，在控制台中，有错误:$ rootScope:infdig angular.bootstrap(document, ['myapp'])处的无限$ digest循环:

However, in the console, there are Error: $rootScope:infdig Infinite $digest Loop at 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，就没有错误.

If we just open https://localhost:3000/try in a browser, there is no error.

有人知道为什么长网址在angular.bootstrap下不起作用吗?我们该如何解决?

Does anyone know why that long url did not work with angular.bootstrap? How could we fix this?

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

Edit 1: a screenshot of the console for https://localhost:3000/try?_host_Info=excel.... Note that neither bootstrapped inside Office.initialize nor bootstrapped outside Office.initialize is displayed. But If I run https://localhost:3000/try in a browser, I will only see bootstrapped outside Office.initialize, when I call it from an Excel client, I will only see bootstrapped inside Office.initialize.

推荐答案

听起来您正在尝试连接一个既可以作为加载项页面也可以作为独立页面运行的页面.只要有可能，最好为每个用例维护单独的视图.如果没有别的，它会使一切变得更加直接.将它们组合在一起可能会造成更多的开销和头痛，这是值得的.

It sounds like you're trying to wire up a page that can operate as either an add-in or a stand-alone page. Whenever possible it is best to maintain separate views for each use case. If nothing else, it makes everything a lot more straight forward. Combining them is likely creating far more overhead and headache that it's worth.

这里的问题之一是您有两个单独的代码路径，并且假设一次仅执行一个路径.当加载到浏览器中时，这是正确的，它将简单地忽略Office.initialize函数.但是，在Office中加载时，它将执行两个路径.一个将由Office执行，另一个将由setTimeOut执行1秒.

Part of your issue here is that you've got two separate code paths and you're assuming only one path will execute at a time. When loaded in a browser this is true, it will simply ignore the Office.initialize function. When loaded within Office however it will execute both paths. One will be executed by Office, the other will be executed by setTimeOut after 1 second.

如果您有两个不同的代码路径，其中只有一个曾经执行过，则需要进行测试以确定是作为加载项还是作为独立页面进行操作.这是那些查询参数起作用的地方.如果定义了_host_Info查询参数，则说明您正在Office内进行操作.例如:

If you have two distinct code paths where only one is ever executed, you need to test to determine if you're operating as an add-in or as a standalone page. This is where those query parameters come into play. If you have a _host_Info query parameter defined then you're operating within Office. For example:

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()是从此答案提取的函数.您可以使用任何喜欢的方法.

Note that getParameterByName() here is a function pulled from this answer. You could use any method you prefer however.

这篇关于对话框的网址不适用于angular.bootstrap(无限$ digest循环)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！