Я хочу создать надстройку 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? Из-за этого происходит много случайных странных поступков...