Question

我有一个AngularJS应用程序，我从REST服务加载数据。

现在有时会发生用于访问范围值的括号{{}}，然后用实际值替换。现在我要做的是在应用程序的顶部ng-switch添加DIV并检查全局变量（例如pageLoaded (true|false)）是否为真或false。如果是真的，我想加载普通页面，如果它是false，我想打印像“loading ...”这样的东西。所以我的问题是，如果所有数据都准备就绪，我是如何得到通知的（例如通过Angular事件）并被添加到范围中？因为在那之后我想将pageLoaded设置为true。

有没有办法以通用方式执行此操作？我不喜欢每页实现这个。

提前多多感谢。

电贺马克

Answer 1

您应该使用ng-cloak - http://docs.angularjs.org/api/ng.directive:ngCloak

要显示加载面板，您可以执行以下操作：

<div ng-hide="true">Loading...</div>

因此，当角度加载完成后，将出现ng-hide并隐藏加载面板。

Answer 2

使用ng-cloak摆脱这类问题。并确保将ng-cloak指令应用于页面正文，以便在数据正确加载之前不会显示。并在CSS文件中使用以下样式。

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

注意：你甚至可以创建一些其他的元素或div，就像弹出窗口或通知栏，它显示“请等到数据被完全加载”。将此div设置为display：none最初并在Ajax调用中，根据需要将display属性更改为block / inline，最后使其成为dispay：在成功回调后没有..：）

Answer 3

其中一个解决方案是您可以使用ng-bind而不是使用{{}}，这会在未呈现值时显示丑陋的{{}}。

<div ng-bind="value">Loading ...</div>

Answer 4

对于任何与OP实际问题有关的问题而不是OP的特定情况：
我有一个片段在通过路由进入的主要部分之后/之后被加载。

我需要在加载子部分之后运行一个函数，我不想写一个新的指令，并且发现你可以使用厚颜无耻的ngIf

父母部分控制者：

$scope.subIsLoaded = function() { /*do stuff*/; return true; };

子部分的HTML

<element ng-if="subIsLoaded()"><!-- more html --></element>

应用所有范围后触发的AngularJS事件

4 个答案: