2016-06-13 2 views
0

Я новичок в работе над угловыми js, при загрузке данных иногда на firefox отображается имя переменной, а после нескольких разделов он правильно показывает содержимое этой переменной. Как загрузить эти данные или как я могу применить загрузчик для загрузки данных. Как вы можете видеть на снимке ниже.Как загрузить данные из углового?

enter image description here

Через некоторое время, он показывает собственное содержание enter image description here

+4

быстрое решение это может быть 'нг-cloak'. это скрывает эти угловые выражения до тех пор, пока они не будут проанализированы и не заселены угловыми. – Yogesh

+0

Об этом неоднократно просили проверить этот ответ http://stackoverflow.com/questions/23453396/is-there-a-different-way-to-hide-a-scope-variable-from-showing-while-angularjs -i – Efx

+0

Не используйте оценочные выражения в видимой части DOM. Это очень хороший момент от имени разных сторон. – Vitalii

ответ

1

Используйте нг-плащ. Он идет так:

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 хорошо описано, как добавить загрузку информации.

+0

Это работает, как я могу применить загрузчик, который загружается на каждую страницу? –

+0

Вы пробовали ' ...' in index.html? –

+0

Что я пробовал, но это плохой формат для загрузки контента, он показывает первый заголовок логотипа, затем кнопку тела, нижний колонтитул, затем заголовок меню bla bla. .. ....... Мне нужно сначала показать загрузчика и после того, как весь контент загружен на страницу, чтобы показать содержимое страницы и изображения. –

2

Чтобы показать экран загрузки во время загрузки данных, вы можете написать настраиваемую директиву.

// директива

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> 
Смежные вопросы