隐藏元素直到加载完成(ng斗篷不是我需要的）

Hiding elements until load has been completed (ng-cloak isn't what I needed)

本文关键字：ng 元素 加载 隐藏      更新时间：2023-09-26

我正在编写一个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>

当页面最初加载时，我想显示元素"Loading"。页面加载后，我想显示元素"显示"。

为了使其可测试，我更改了控制器方法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);
    }
});

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

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

以下是我已经尝试过的：

装载显示

然而，这种设置并不能很好地工作。

我已经包含了一个Plunker，这样您就可以测试您提供的解决方案。

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

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

如果你使用angularjs $timeout，它可以

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

您也可以使用$scope.$digest()或$scope.$apply使其在上工作

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

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