Нг-плащ не работает при загрузке страницы

Я новичок в AngularJS и пытаюсь исправить проблему, из-за которой часть HTML-кода отображается перед оценкой условия ng-if. Я использую ng-cloak, как упоминалось во многих других URL-адресах стеков, но он все еще не работает для меня. Я пытаюсь загрузить изображение по умолчанию, если фактическое изображение в URL-адресе пустое, и когда страница загружается, даже если фактический URL-адрес существует, он сначала мигает вместе с изображением по умолчанию, а затем загружает фактическое изображение, потому что ng-cloak работает неправильно.

Пожалуйста помоги.

У меня есть ниже код и 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>
Источник

6 ответов

Вы можете подать заявку ng-cloak в вашем body тег. Таким образом, все ваше тело будет отображаться только после компиляции углов.

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

Это решит вашу проблему.

Источник

Я делал это всегда на своем <html> тег. подобно <html ng-app="someApp" ng-cloak>

Источник

timeout Функция будет делать то, что вы хотите:

// timeout function will give some time for page load.
$timeout(function () {
  //your page load
  $("#panelTask").html(res);
});
Источник

Лучшее решение - иметь загрузчик, пока ваше приложение ожидает данные. Вместо того, чтобы помещать ng-if в мерцающий элемент, вставьте родительский компонент и покажите загрузчик (может быть, FB делает что-то вроде вашего UI).

Источник

Пришлось добавить:

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

в мой файл css для работы ng-cloak.

Как здесь:Как правильно использовать директиву ng-cloak?

Источник 

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

Источник
Другие вопросы по тегам