Question

我正在编写一个AngularJS应用程序，但我对它很新，所以在下面的代码中，请指出你遇到的任何问题。

我确实让我的AngularJS应用程序定义如下：

var OfficeUIModule = angular.module('OfficeUI', ['ngSanitize']);

然后，我确实有一些服务从各种JSon文件加载数据。但我不会在这里发布代码，因为我确实认为这是无关紧要的。

然后我的控制器基本上看起来像这样：

OfficeUIModule.controller('OfficeUIController', function($scope) { });

现在，我希望控制器在启动时执行一些逻辑并在其上显示DIV元素。这就是我想要做的事情：

在初始设置期间显示Loading DIV元素。
初始化完成后显示Displaying DIV元素。

假设在我的控制器中我有初始化应用程序的方法：

OfficeUIModule.controller('OfficeUIController', function($scope) {
    function Init() { 
        // I'll load all the data from the services here.
    }
});

为了在启动时调用此方法，我只需在控制器中定义它，如下所示：

OfficeUIModule.controller('OfficeUIController', function($scope) {
    Init();     

    function Init() { 
        // I'll load all the data from the services here.
    }
});

我想要使用的HTML如下：

<body>
    <div id="loading">LOADING</div>
    <div id="displaying">DISPLAYING</div>
</body>

最初加载页面时，我想显示“正在加载”元素。加载页面后，我想显示元素'显示'。

为了使这个可测试，我已经改变了我的控制器方法Init以包括5秒的超时，如下所示：

OfficeUIModule.controller('OfficeUIController', function($scope) {
    Init();     

    function Init() { 
        setTimeout(function() {
            alert('Page has been loaded. When you click OK the displaying  DIV should be showed.');
        }, 5000);
    }
});

因此，在这种特殊情况下，我想确保正在加载页面，显示LOADING div，并在5秒后显示DISPLAYING div。

我也不希望看到任何闪烁，因此可以使用我读过的ng-cloak，但我无法正确配置它。

以下是我已经尝试过的内容：

LOADING DISPLAYING

但是，这种设置效果不佳。

我添加了Plunker，以便您可以测试您提供的解决方案。

Answer 1

之所以发生这种情况，是因为您使用setTimeout匿名函数而angularjs不知道模型更改

http://plnkr.co/edit/FJ2lnrmtG7P3HXZuxRkH?p=preview

如果您使用angularjs $timeout，则可以使用

$timeout(function() {
  $scope.initialized = true;
}, 5000);

您还可以使用$scope.$digest()或$scope.$apply使其正常工作

Answer 2

您可以使用窗口加载事件的角度版本。

angular.element($window).bind('load', function(e) {
    // code to execute
});

隐藏元素直到负载完成（ng-cloak不是我需要的）

2 个答案: