0

我想用 angular 和 angular-ui-router 构建一个 Office 加载项。不知道放什么地方合适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在使用 angularjs 的 Office 插件中正确的方法是什么？由于这个原因，会发生许多随机的奇怪行为......

4

2 回答 2

0

正确的方法是您必须在 Office.initialize 中手动启动 AngularJS 应用程序

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"
        });
});
于 2018-05-30T09:02:35.453 回答
0

控制台 ttt 显示两次的原因是我同时拥有<body ng-app="myApp">和 angular.bootstrap。

如果我从 Office.initialize 中删除 angular.element(document).ready(...)，则控制台 ttt 只会正确显示一次。但是，当打开另一个与 Excel 交互的页面时，出现错误：Office.context 未定义。

我还没有测试过，但Office.initialize完全删除块并保留<body ng-app="myApp">可能会解决问题......

于 2018-01-02T05:34:00.510 回答