Question

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

请帮忙。

我有以下代码和CSS等。

的index.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>

other.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>

Answer 1

您可以在ng-cloak标记中应用body。因此，只有在角度编辑之后才会显示整个身体。

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

这将解决您的问题。

Answer 2

我总是在我的<html>标签上完成。与<html ng-app="someApp" ng-cloak>

一样

Answer 3

timeout函数可以执行您想要的操作：

// timeout function will give some time for page load.
$timeout(function () {
  //your page load
  $("#panelTask").html(res);
});

Answer 4

最佳解决方案是在您的应用等待数据时使用加载程序。不要将ng-if放在闪烁元素上，而是放入父组件并显示一个加载器（它可能会像FB一样模拟你的UI）。

Answer 5

我不得不补充：

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

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

就像这里：How to correctly use ng-cloak directive?

Answer 6

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

页面加载时ng-cloak无法正常工作

6 个答案: