在显示 office 插件的主页之前解决

Question

我正在尝试使用 angularjs 框架来实现 office 插件。

在Home.html中，内容最多$scope.condition

<div ng-controller="MainCtrl">
    <div ng-show="condition">
        part1
    </div>
    <div ng-show="!condition">
        part2
    </div>
</div>

在Home.js中，我有以下内容。请注意，$scope.condition 的值可以在运行时更改。

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

var appAng = angular.module('appAng', []);

appAng.controller("MainCtrl", ["$scope", function($scope) {
    $scope.condition = ...
}

问题是，第一次加载插件时，在计算$scope.condition的值之前，part1和part2都显示了很短的时间.时间虽短，但第一印象并不好

如果它是一个网站，我们可以使用，例如，angular-ui-router 的 resolve 来确保在显示页面之前计算 $scope.condition。

有没有人有什么好主意可以在 office 插件中改进它？请注意，我没有用于此插件的服务器。

Answer 1

使用ngCloak。您需要添加此 CSS:

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

然后将 ng-cloak 属性或 class 添加到您的模板：

<div ng-controller="MainCtrl" ng-cloak>
    <div ng-show="condition">
        part1
    </div>
    <div ng-show="!condition">
        part2
    </div>
</div>

此外，请牢记文档中的这句话：

For the best result, the angular.js script must be loaded in the head section of the html document; alternatively, the css rule above must be included in the external stylesheet of the application.

在显示 office 插件的主页之前解决

Resolve before showing the home page of an office addin

javascript

ms-office

angularjs

angular-ui-router

office-js