7

我是 AngularJS 的新手，并试图解决在评估 ng-if 条件之前显示某些 HTML 代码的问题。我正在使用 ng-cloak，正如许多其他堆栈 over flow URL 中提到的那样，但它仍然对我不起作用。如果 URL 上的实际图像为空白，我正在尝试加载默认图像，并且当页面加载时，即使实际 URL 存在，它首先会以默认图像闪烁，然后加载实际图像，因为 ng-cloak 无法正常工作。

请帮忙。

我有以下代码和 CSS 等。

索引.html

<!DOCTYPE>
<html>
<head>
    <meta charset="UTF-8">
    <base href="/">

    <title>Some App</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-resource.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.min.js"></script>
    <script src="https://code.angularjs.org/1.4.7/angular-sanitize.min.js"></script>

    <style type="text/css">
        [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
        display: none !important;
    }       
    </style>    
</head>
<body ng-app="app">
some code here
<div ng-view></div>
</body>
</html>

其他.html

<div class="content">
    <div style="width: 100px; height: 40px;">

        <div ng-if="image.small">
            <img src="{image.small}}">
        </div>
        <div ng-if="!image.small" ng-cloak>
            <img src="image/default.png">
        </div>
</div>
4

6 回答 6

2

您可以ng-cloak在您的body标签中申请。所以，你的整个身体只有在 Angular 编译后才会显示出来。

<body ng-cloak ng-app="app">
..
</body>

这将解决您的问题。

于 2015-11-20T03:52:35.853 回答
1

我总是在我的<html>标签上这样做。喜欢<html ng-app="someApp" ng-cloak>

于 2015-11-20T06:03:34.440 回答
1

该timeout功能将执行您想要的操作：

// timeout function will give some time for page load.
$timeout(function () {
  //your page load
  $("#panelTask").html(res);
});
于 2018-04-25T10:42:59.530 回答
0

我不得不补充：

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

到我的 css 文件中，以便 ng-cloak 工作。

喜欢这里：如何正确使用 ng-cloak 指令？

于 2021-04-23T09:45:12.277 回答
0

最好的解决方案是在您的应用程序等待数据时使用加载器。与其将 ng-if 放在闪烁的元素上，不如将其放在父组件上并显示一个加载器（它可能像 FB 对您的 UI 进行某种模拟）。

于 2016-05-12T23:53:54.487 回答
-3 

    <div ng-if="image.small">
        <img src="{image.small}}">
    </div>
    <div ng-if="!image.small" class="ng-cloak">
        <img src="image/default.png">
    </div>

于 2016-06-22T07:06:09.340 回答