Правильный способ Office.initialize в надстройках Office с angularjs

Я хочу создать надстройку Office с angular и angular-ui-router. Я не знаю, где правильно поставить Office.initialize.

На данный момент я использую в index.html:

<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
<script src="https://cdn.rawgit.com/devote/HTML5-History-API/master/history.js"></script>
<script src="/javascripts/angularApp.js"></script>
...
<body ng-app="myApp">
    <ui-view ng-cloak></ui-view>
</body>

И angularApp.js:

Office.initialize = function (reason) {
    $(document).ready(function () {
        angular.element(document).ready(function () {
            angular.bootstrap(document, ['myApp'])
        })
    });
}

var app = angular.module('myApp', ['ui.router', 'ui.bootstrap'])

app.config(['$stateProvider', function ($stateProvider) {
    $stateProvider
        .state('ttt', {
            url: '/ttt',
            template: 'ttt',
            controller: 'tttCtrl'
        })
        .state('addinTest', {
            url: '/addin/test',
            template: '<a href="ttt" target="_self">ttt</a><br/><br/><a href="addin/another" target="_self">another page</a>'
        })
}])

app.controller('tttCtrl', [function() {
    console.log('console ttt')
}])

И manifest.xml:

<bt:Url id="Contoso.Taskpane3.Url" DefaultValue="https://localhost:3000/addin/test" />

Итак, загрузка надстройки показывает test страницу с 2 кнопками. При нажатии на ttt загружается ttt страница. Однако мой тест показывает, что console ttt отображается дважды.

Если я уберу angular.element(document).ready(...) из Office.initialize, console ttt правильно отобразится только один раз. Однако при открытии страницы another, которая взаимодействует с Excel, я получил ошибку: Office.context is undefined.

Итак, может ли кто-нибудь сказать мне, следует ли нам использовать angular.bootstrap(...)? И как правильно сделать Office.initialize в надстройке Office с помощью angularjs? Из-за этого происходит много случайных странных поступков...


angularjs office-addins ms-office office-js office-app
person SoftTimur    schedule 08.07.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Причина, по которой консоль ttt отображается дважды, заключается в том, что у меня одновременно есть <body ng-app="myApp"> и angular.bootstrap.

Если я удаляю angular.element(document).ready(...) из Office.initialize, консольный ttt правильно отображается только один раз. Однако при открытии другой страницы, взаимодействующей с Excel, я получил сообщение об ошибке: Office.context не определен.

Я не проверял, но полное удаление блока Office.initialize и сохранение <body ng-app="myApp"> может решить проблему...

person SoftTimur    schedule 02.01.2018

arrow_upward
0
arrow_downward

Правильный способ: вы должны вручную запустить приложение AngularJS внутри Office.initialize.

RouteConfig.js

Office.initialize = function () {
    //load angular app after office has been initialized
    angular.bootstrap($('#TSRApp'), ['TSRApp']);
}
var app = angular.module("TSRApp", ["ngRoute"]);
app.config(function ($routeProvider) {
    $routeProvider
        .when("/", {
            templateUrl: "../Home/Index.html"
        })
        .when("/settings", {
            templateUrl: "../Settings/Index.html"
        })
        .when("/message", {
            templateUrl: "../MessageRead/MessageRead.html"
        });
});
person sonmt    schedule 30.05.2018