Question

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

在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都会显示很短的时间。时间很短，但第一印象并不好。

如果是网站，我们可以使用resolve angular-ui-router $scope.condition来确保在显示网页之前计算var images=['http://placeskull.com/300x300','http://placeskull.com/400x400','http://placeskull.com/500x500']; var idx=0; // we're at the first image so, 0 function myFunction() { $('#UCL').attr('src',images[idx]); idx=(idx+1)%(images.length); // to avoid the index getting bigger than the number of images, we use the modulo operator % to make it circular, 0 1 2 0 1 2 0 1 2 ... } myFunction(); window.setInterval(function(){ myFunction(); }, 2000); // 2000ms, change to whatever timing you want。

有没有人有任何好主意在办公室插件中改善这一点？请注意，此插件我没有服务器。

Answer 1

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

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

然后将ng-cloak属性或类添加到模板中：

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

另外，请记住文档中的引用：

为获得最佳效果，必须在头部加载angular.js脚本 html文档的一部分;或者，上面的css规则必须包含在应用程序的外部样式表中。

在显示办公室插件的主页之前解决

1 个答案: