Office Dialog API出現單頁應用程序拋出錯誤

Question

我正在開發一個外接程序，它是一個Angular單頁應用程序。 當前它只有一個控制器（一個屏幕）。 根據文檔 ：

如果外接程序像單頁應用程序通常那樣使用客戶端路由，則可以選擇將路由的URL傳遞給displayDialogAsync方法，而不是將完整的HTML頁面的URL傳遞。

HTML

<button type="button" class="ms-Button ms-Button--compound" id="addPlaceholder" ng-click="openPopup()">
    <span class="ms-Button-label">Open Popup</span><span class="ms-Button-description">Open Popup</span>
</button>

控制器代碼

researchApppBuilderModule.controller('researchcontroller', ['$scope', '$location',
            function ($scope, $location) {

                var urlRoot = $("base").first().attr("href");
                $scope.openPopup = function () {
                    var dialog;
                    Office.context.ui.displayDialogAsync(urlRoot + '/app/research', { height: 30, width: 20 },
                        function (asyncResult) {
                            dialog = asyncResult.value;

                        });
                }
    }]);

我已經在外接程序中測試了此路由，並且可以正常工作。 所以，我知道路線是正確的。

因此，這段代碼打開了一個對話框，但出現錯誤：

添加錯誤：

抱歉，我們無法加載該加載項。 請確保您具有網絡和/或Internet連接。 重新聯機后，點擊“重試”。

錯誤截圖

我嘗試在文檔中搜索，但找不到任何東西。 我想念什么？

Answer 1

盡管您可以“將”路由傳遞給displayDialogAsync方法，但由於您所引用的文檔段落下方的注釋中給出的原因，我不建議您使用該路由：對話框中將啟動外接程序的全新實例。 這意味着該應用程序將通過其初始化代碼。 這通常會混淆路由策略，並且對話框最終會嘗試導航到默認路由和您傳遞給該方法的路由的無效組合的URL，例如https://example.com/app/#/app/research 。

我建議創建一個research.html頁面並將其URL傳遞給對話框（如本示例所示： Word-Add-in-AngularJS-Client-OAuth ）。 這似乎有悖於單頁面應用程序的純度。 但是在傳遞給方法的路由時仍要這樣做，因為實際上是在傳遞應用程序“單頁”的第二個實例（因為正在啟動整個應用程序的第二個實例）。

否則，您可以通過使displayDialogAsync回調將asyncResult.error.code和asyncResult.error.message屬性記錄到控制台來進行故障排除。 我還建議您閱讀“ 使用對話框API”。 處理錯誤和事件 。 您還可以使用Fiddler工具或Charles工具來查看對話框嘗試打開的URL。

最后，您的代碼沒有顯示urlRoot是什么。 確保它是包含HTTPS協議的絕對URL。