ng-cloak не работает при загрузке страницы

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

источник

2015-11-20 ree

Вы могли бы использовать что-то вроде , чтобы избежать использования ngIf –

@ItaloAyres, Спасибо за ответ, но мне нужно использовать несколько условий, как если image.small не там, чем чек для image.large, и если это не так, как изображение загрузки по умолчанию. Не знаю, как это сделать, используя это условие, которое вы показали, поэтому я попытался использовать ng-if для этого. – ree

Использование || присваивание - это выражение JS, которое возвращает первое непустое значение. Вы можете использовать его с любым количеством таких переменных: X = a || b || c, а X получит первый с ненулевым значением. –

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

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

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

источник

2015-11-20 03:52:35

Благодарим вас за ответ @Abhilash P A, но это не работает. После того, как я применил ng-cloak в теге body, предположим ли это, чтобы показать некоторую информацию, связанную с этим, когда я проверяю инструмент Developers на chrome? Я вижу только средство в инструменте разработчика даже после добавления ng-cloak, как вы показали в примере. Еще один вопрос: нужно ли загружать этот ng-cloak в качестве модуля, аналогичного добавляемому контроллеру или сервису? – ree

@ree, Нет, нет модуля для 'ng-cloak'. Это просто класс с свойством 'display: none', и после компиляции компилятор углов удалит этот класс из элемента. –

Так что это все еще не работает для меня. Что мне теперь делать. Пожалуйста помоги. Вот что я сейчас имею в своем коде. – ree

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

источник

2015-11-20 06:03:34

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

источник

2016-05-12 23:53:54 Ruben

-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-22 07:06:09

Не могли бы вы добавить более подробную информацию к своему ответу? Упрощает OP то, что он сделал неправильно в своем коде :) – Jer

Хотя этот фрагмент кода может решить вопрос, [включая пояснения] (https://meta.stackexchange.com/questions/114762/explaining-entirely -код-ответы) действительно помогает улучшить качество вашего сообщения. Помните, что вы отвечаете на вопрос читателей в будущем, и эти люди могут не знать причин вашего предложения кода. Также попробуйте не толковать код с пояснительными комментариями, что уменьшает читаемость кода и объяснений! –

ng-cloak не работает при загрузке страницы

ответ

Смежные вопросы