2017-08-01 117 views
5

我有一个平均堆栈网站。我想用ExecuteFunction绑定一个按钮,在对话框中推出这个网站:

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

点击按钮将打开以下网址一个对话框,它显示页面的内容:

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 

然而,在控制台中,有在angular.bootstrap(document, ['myapp'])Error: $rootScope:infdig Infinite $digest Loop

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 r,没有错误。

有谁知道为什么这个长的网址不适用于angular.bootstrap?我们如何解决这个问题?

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

enter image description here

+1

在加载或定义模块后,您应该调用angular.bootstrap()。查看https://docs.angularjs.org/guide/bootstrap或更多详细信息。 – Vivz

+0

“myapp”声明在哪里? – 31piy

+1

你正在调用'angular.bootstrap(document,['myapp'])'两次检查它。你需要一次引导它。 –

回答

1

这听起来像你试图要连接的是可以作为一个附加的或独立的页面操作页面。只要有可能,最好为每个用例维护单独的视图。如果没有别的东西,它会让所有事情变得更直接。把它们结合起来可能会造成更多的开销和头痛,这是值得的。

这里的问题的一部分是,你有两个独立的代码路径,你假设一次只能执行一个路径。当在浏览器中加载时,它将会忽略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拉的功能。你可以使用任何你喜欢的方法。

+0

感谢您的回答......我确实希望使用函数来检查页面是作为加载项运行还是作为独立页面运行。但似乎我只能使用'ui-router'来区分'https:// localhost:3000/try'和'https:// localhost:3000/try?_host_Info ...',我不认为我们可以在'$ stateProvider.state(...)'里面加入'angular.bootstrap',我们可以吗? – SoftTimur