0

I am trying to use angularjs framework to implement an office addin.

In Home.html, the content is up to $scope.condition

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

In Home.js, I have the follows. Note that the value of $scope.condition can change in the runtime.

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 = ...
}

The problem is, when the addin is loaded for the first time, before the value of $scope.condition is calculated, both part1 and part2 are shown for a very short time. The time is short, but the first impression is not good.

If it was a website, we could use, for example, resolve of angular-ui-router to make sure $scope.condition is calculated before displaying the page.

Does anyone have any good idea to improve this in an office addin? Note that I don't have a server behind for this addin.

SoftTimur
  • 5,630
  • 38
  • 140
  • 292

1 Answers1

0

Use ngCloak. You need to add this CSS:

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

And then add the ng-cloak attribute or class to your template:

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

Also, keep this quote from the docs in mind:

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.

Danziger
  • 19,628
  • 4
  • 53
  • 83
  • 1
    I see... It does help for addin! I'm thinking of using `ng-cloak` for my website (bootstrap + angularjs + ui-router) as well. As the controller is in `$stateProvider.state('home', { url: '/home', controller: 'MainCtrl' ... })`, where should I put `ng-cloak`? I tried to put ``, but it does not seem to be better than before. – SoftTimur May 21 '17 at 17:49
  • Check my update in the answer. I would try to put it in the `` element, but I think `` should work fine anyway. This is worth taking a look if none of those changes work: http://stackoverflow.com/questions/21302344/ng-cloak-doesnt-help-for-angular-ui-router-for-hiding-elements-while-template-p – Danziger May 21 '17 at 17:59
  • OK... The problem of my website is not `ng-show` or `ng-if`, etc., it just has some very slight flicker effect, I don't know if `ng-cloak` is supposed to solve that, I don't see obvious improvement after adding `ng-cloak`... – SoftTimur May 21 '17 at 18:06