Adres URL okna dialogowego nie działa z opcją angular.bootstrap (infinite $ digest Loop)

Question

Mam witrynę ze średniej wysokości. Chcę używać ExecuteFunction powiązać przycisk do uruchomienia tej witryny w Okno dialogowe:

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

Kliknięcie na przycisk otwiera okno dialogowe z następującym adresem URL, to jednak wykazują zawartość strony:

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 

jednak w konsoli, istnieje Error: $rootScope:infdig Infinite $digest Loop w 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(...); 

Gdybyśmy tylko otwarte https://localhost:3000/try w browse r, nie ma błędu.

Czy ktoś wie, dlaczego ten długi URL nie zadziałał z angular.bootstrap? Jak możemy to naprawić?

Edytuj 1: zrzut ekranu konsoli dla https://localhost:3000/try?_host_Info=excel.... Zauważ, że nie wyświetla się ani bootstrapped inside Office.initialize ani bootstrapped outside Office.initialize. Ale jeśli uruchomię w przeglądarce https://localhost:3000/try, zobaczę tylko bootstrapped outside Office.initialize, gdy zadzwonię do niego z klienta Excela, zobaczę tylko bootstrapped inside Office.initialize.

Answer 1

Brzmi jak próbujesz podłączyć się do strony, która może działać albo jako dodatek lub strony autonomicznym. Gdy tylko jest to możliwe, najlepiej jest zachować oddzielne widoki dla każdego przypadku użycia. Jeśli nic więcej, wszystko staje się bardziej proste. Łączenie ich prawdopodobnie powoduje znacznie więcej napięć i bólów głowy, niż jest to warte.

Część twojego problemu polega na tym, że masz dwie oddzielne ścieżki kodu i zakładasz, że tylko jedna ścieżka będzie wykonywana jednocześnie. Po załadowaniu do przeglądarki jest to prawda, po prostu zignoruje funkcję Office.initialize. Po załadowaniu w pakiecie Office wykona obie ścieżki. Jedna zostanie wykonana przez Office, druga zostanie wykonana przez setTimeOut po 1 sekundzie.

Jeśli masz dwie różne ścieżki kodu, w których tylko jedna jest kiedykolwiek wykonywana, musisz przetestować, aby określić, czy działasz jako dodatek, czy jako osobna strona. Właśnie tam wchodzą te parametry zapytania. Jeśli masz zdefiniowany parametr zapytania _host_Info, to działasz w pakiecie Office. Na przykład:

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"); 
    }) 
} 

Zauważ, że getParameterByName() tutaj jest funkcją wyciągnął z this answer. Można jednak użyć dowolnej metody, którą preferujesz.