如何从角度加载数据？答案

【问题标题】：How to load data from angular?如何从角度加载数据？
【发布时间】：2016-10-13 22:46:18
【问题描述】：

我是 Angular js 的新手，有时在 Firefox 上加载数据时，它会显示变量名称，在几节之后，它会以适当的方式显示该变量的内容。如何加载此数据或如何应用加载程序加载数据。正如您可以在下面的屏幕截图中看到的那样。

过了一会儿，它显示了正确的内容

【问题讨论】：

快速解决此问题的方法是ng-cloak。这会隐藏那些角度表达式，直到它们被 angularjs 解析和填充。
这已经被问过很多次检查这个答案stackoverflow.com/questions/23453396/…
不要在 DOM 的可见部分使用求值表达式。这是代表不同方面的一个很好的观点

标签： javascript angularjs

【解决方案1】：

要在加载数据时显示加载屏幕，您可以编写自定义指令。

// 指令

app.directive('loading', ['$http', function ($http) {
    return {
        restrict: 'A',
        link: function (scope, elm, attrs) {
            scope.isLoading = function () {
                return $http.pendingRequests.length > 0;
            };

            scope.$watch(scope.isLoading, function (v) {
                if (v) {
                    elm.show();
                } else {
                    elm.hide();
                }
            });
        }
    };
}]);

这样使用

<body>
<!-- apply style/css to below div to cover entire page/element on which you want to show loader -->
<div loading>
<!-- add an image tag here with src as any loading gif image -->
</div>
</body>

【讨论】：

【解决方案2】：

使用 ng-cloak。是这样的：

CSS：

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

HTML：

<body ng-cloak> ... </body>

会起作用，但它会隐藏整个身体。 https://docs.angularjs.org/api/ng/directive/ngCloak:

该指令可以应用于元素，但首选用法是将多个 ngCloak 指令应用于页面的一小部分，以允许渐进式呈现浏览器视图。

所以最好将ng-cloak 应用于特定元素：

<div ng-cloak> ... </div>
<div ng-cloak> ... </div>

Here 很好地描述了如何添加加载信息。

【讨论】：

这工作如何应用加载到每个页面上的加载器？
你尝试过 index.html 中的<body ng-cloak> ... </body> 吗？
我已经尝试过了，但是加载内容的格式不好，它首先显示标题徽标，然后显示正文按钮、页脚，然后是标题菜单 bla bla 。 .. .......我需要首先显示一个加载器，一旦所有内容加载到页面上，然后显示页面内容和图像。
如前所述，最好将ng-cloak 应用于页面的一小部分，以允许渐进式呈现浏览器视图。所以最好不要全局添加，而是在需要的地方（元素）添加。
好的，你有什么想法来显示加载器，一旦内容准备好加载，然后只显示使用角度 js 的图像内容？喜欢breather.com/locations/new-york