[JS, jQuery, AngularJS] prebliknutie pri načitávaní
Zdravím,
potrebujem poradiť s problémom:
index.html:
<body data-ng-app="app" data-ng-cloak="">
...
<div data-ng-view=""></div>
...
</body>
view.html:
...
<span data-ng-bind="vysledok"></span>
text ktorý preblikne
...
<span data-ng-bind="vysledok2"></span>
ďalší text ktorý preblikne
...
app.js:
/* routing */
...
$routeProvider.when('/mojaurl', {
templateUrl: 'view.html',
controller: 'myctrl'
})
...
...
app.controller('myctrl', function($scope) {
$scope.vysledok = ... ;
...
...
$scope.vysledok2 = ... ;
}
jak môžem tomu preblikávaniu zabrániť? Zatial som to riešil spôsobom že som mal skrz CSS skrytý obsah ktorý preblikával a potom skrz jQuery .show() som ho zobrazil, ale když je toho obsahu tucet rôznak zanestovaný a propletený obsahom ktorý sa binduje tak je to problém. Veľkosť elementov nemôžem nastaviť napevno lebo neviem aký bude ich obsah kým to nenabindujem.
Co tohle?
problém vidím asi v tomto:
tretí a paty riadok v screenshote sú súbory s dátami ktoré sa používajú pre výpočet výsledku ktorý sa binduje. P.S. asi som mal zmíniť že dáta ktoré priraďujem do $scopu a následne sa bindujú že sú vnorené vo funkcii ktorá sa volá po dokončení predchádzajúcej funkcii (AJAX requestu)... asi tým že používam .then() to asi taky neco delá, lenže inak než s tým .then() to nemá ako spraviť.
Co teda to obejít takto? Při spuštění aplikace (načtení webu) se zobrazí jen prázdná stránka (nebo stránka s obyč. textem, něco ve smyslu placeholder) a přes časovací funkci setTimeout() se nastaví zavolání požadované stránky, tj. změní se programově adresa v $routeProvider třeba za 100ms?
skusil som to ešte trocha iným spôsobom, ktorý funguje tak trocha opačne, pri bežnom načitávaní to funguje super, pri pomalom načitávaní rádovo pri rýchlostiach slow 3G tak vidno prebliknutie teraz tak že sa dáta nabindujú ešte skorej než sa zobrazí ten text ktorý už v HTML bol, čož je opak toho čo som teraz riešil. Spôsobilo to to že za funkcí kde jsem vykonával výpočet výsledku pre binding tak som použil .then(function() {$scope.loaded = true}; a pak som všade do if direktív napcal loaded hodnotu. Neviem jak to ale spraviť tak aby sa to presne postupne načítalo. Resp prvý binding, zobrazenie textu za ním, druhý binding za prvým textom, zobrazenie textu za druhým bindingom. atd.
Tak teď už ti vůbec nerozumím.
Predstav si takú situáciu že pôvodne sa mi to načitávalo takto (hviezdička predstavuje začiatok riadku):
prvá snímka:
druhá snímka:
tretia snímka:
jak vidíš text "neco" bylo skorej na druhom riadku, potom na tretom, pretože bindované dáta to odsunuli, keďže to neco v prvej snímke na druhom riadku bolo vykreslené len asi 60ms, tak to vyzeralo ako prebliknutie.
po mojom pokuse o riešení:
prvá snímka:
druhá snímka:
tretia snímka:
Jo, už chápu. Zkus teda prvně zobrazit prázdnou stránku a po načtení dat z AJAX volání přes routerProvider změnit url a tím načíst tvou stránku - pokud teda ten AJAX neprobíhá v controlleru.
Ještě mě napadlo: nemá Angular něco jako resolve? Ve smyslu "dokud nemám data, nedojde k zobrazení stránky"?
No jasně že má!
pozerám toto by mohlo byť asi najlepšie riešenie.
tak to nechápem, ale i s týmto kódom:
to preblikáva... asi sa s tým ešte musím pohrať, zrejme chybu niekde robím ja.