Czy istnieje inny sposób ukrywania zmiennej zasięgu przed wyświetlaniem podczas ładowania AngularJS? - angularjs

Używam w ten sposób:

<div ng-cloak>{{ message.userName || message.text }}</div>

Czy to jedyny / najlepszy sposób, aby upewnić się, że użytkownik nie widzi {{}}, gdy AngularJS wciąż się ładuje?

Odpowiedzi:

Istnieje kilka sposobów na ukrycie treści, zanim Angular ma szansę uruchomić

• Umieść treść, którą chcesz ukryć, w innym szablonie i użyj ngInclude

  <div ng-include=""myPartialTemplate.html""></div>
  

  Jeśli tak naprawdę nie chcesz, aby serwer wysłał kolejne żądanie pobrania innego pliku, istnieje kilka sposobów, jak wyjaśniono w $templateCache docs. Istnieją narzędzia do „kompilowania” zewnętrznych szablonów HTML do JS, aby uniknąć konieczności robienia tego ręcznie, np szablony kątowe.

• Podobny do ngInclude, jeśli wszystko włożysz niestandardowe dyrektywy, z własnym szablonem, zawartość szablonu nie będzie wyświetlana, dopóki Angular nie będzie miał możliwości uruchomienia.

  <my-directive></my-directive>
  

  Z definicją:

  app.directive("myDirective", function() {
  return {
  restrict: "E",
  template: "<div>Content hidden until Angular loaded</div>"
  }
  });
  

• ngBind jako alternatywa dla {{}} Bloki

  <div>Hello <span ng-bind="name"></span></div>
  

• ngCloak jak wspomniałeś (na tej liście dla kompletności).

  <div ng-cloak>Content hidden until Angular compiled the template</div>
  

  Ale musisz załadować określone style, zanim strona będzie renderowana przez przeglądarkę, jak wyjaśniono w ngCloak docs.

Możesz użyć ng-bind tak jak dokumentacja wyjaśnia

Typowa zaleta ng-bind to możliwość podania wartości domyślnej podczas ładowania Angulara (w rzeczywistości ng-cloak może tylko ukryć Treść):

<p>Hello, <span ng-bind="user.name">MyDefaultValueWhileAngularIsLoading<span/></p>

Następnie, gdy tylko Angular zostanie załadowany, wartość zostanie zastąpiona przez user.name.

Oprócz, ng-cloak przydaje się, gdy masz do czynienia Bloki (wiele linii HTML) i ng-bind na konkretny element.