Office Dialog API с ошибкой создания одностраничного приложения

Question

Я работаю над надстройкой, и это приложение Angular для одной страницы.В настоящее время он имеет только один контроллер (один экран).На основе документации :

Если ваша надстройка использует маршрутизацию на стороне клиента, как это обычно делают одностраничные приложения, у вас есть возможность передать URL-адрес маршрутав метод displayDialogAsync, вместо URL полной и отдельной HTML-страницы.

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;

                        });
                }
    }]);

Я проверил этот маршрут в Надстройке, и он работает.Итак, я знаю, что маршрут правильный.

Итак, этот код открывает диалоговое окно, но с ошибкой:

ОШИБКА ДОБАВЛЕНИЯ:

Извините, мы не можем загрузить надстройку.Пожалуйста, убедитесь, что у вас есть сеть и / или подключение к Интернету.Нажмите «Повторить», как только вы вернетесь в сеть.

Снимок экрана ошибки

Я попытался выполнить поиск в документации, но ничего не смог найти.Чего мне не хватает?

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 на консоль.Я также рекомендую вам прочитать Использование Dialog API |Обработка ошибок и событий .Вы также можете использовать инструмент Fiddler или Charles, чтобы увидеть, какой URL пытается открыть диалоговое окно.

Наконец, ваш код не показывает, что такое urlRoot.Убедитесь, что это абсолютный URL, включая протокол HTTPS.