angularjs - Angular router-ui views are rendered before JS Scripts -
i'm trying create single page application multiple views (header, footer, sidebar, mainpage ...) every view has animations on (js scripts), first componenats attached index.js, after using router-ui , separating views, found animations not working anymore (jquery, bootstrap.js ...)
here scripts in index.html:
<!-- jquery --> <script src="js/jquery-1.10.2.min.js"></script> <!-- bootstrap --> <script src="bootstrap/js/bootstrap.min.js"></script> <!-- modernizr --> <script src='js/modernizr.min.js'></script> <!-- pace --> <script src='js/pace.min.js'></script> <!-- popup overlay --> <script src='js/jquery.popupoverlay.min.js'></script> <!-- slimscroll --> <script src='js/jquery.slimscroll.min.js'></script> <!-- cookie --> <script src='js/jquery.cookie.min.js'></script>
and here example of views :
$stateprovider .state('main', { abstract: true, views: { 'header': { templateurl: 'components/partials/header.html' }, 'sidebar': { templateurl: 'components/partials/sidebar.html' } } }) .state('chat', { url: '/chat', parent: 'main' views: { 'main@': { templateurl: 'components/chat/chat.html', controller: 'chatcontroller', controlleras: 'chatctrl' } } });
there way tell angular wait until scripts loaded? or maybe library facilitate task, if yes please give example, thanks.
adding ng-cloak directive uiview container should make angular wait until content finished loading before displaying.
<div ui-view ng-cloak></div>
see https://docs.angularjs.org/api/ng/directive/ngcloak additional information.
p.s. sorry can't comment yet
Comments
Post a Comment