angularjs - Asynchronously issue -


use case:

in index.html. have 2 ng-include directives , 2 custom directives.

each directive has src attribute defined address load html snippet server (the custom directives have template attribute loading html)

i need make sure directives (see code 1,2,3) have loaded html snippets before call fifth ng-include directive (4) load java-script server.

right directives running asynchronously , can't sure directive loads javascript should last 1 load. need because if javascript loaded , executed before html wouldn't go through html , linking javascript/jquery.

i have solved issue using classic way. update global variable whenever html snipts loaded , define ng-include directive load javascript conditionally when global variable true indicating other directives have loaded html. not angular way. need angular way , btw i'm new starter on angular.

index.html

<div ng-controller="navigationcontroller" >              **(1)**<agilesites-navbar></agilesites-navbar>              <div class="container-fluid">                 <div class="row row-offcanvas row-offcanvas-right">                     <div id="offcanvas-curtain" class="hidden-lg"></div>                     <div id="contentcontainer" class="col-sm-12 col-md-12 col-lg-12">                        <div ui-view="content" id="content"></div>                     </div>                     **(2)**<agilesites-sidebar></agilesites-sidebar>                 </div>             </div>              **(3)**<ng-include src="''+api_host+'api/cms/footer'" onload="cmsresourceloadingstatus(true)"></ng-include>             **(4)**<ng-include src="''+api_host+'api/cms/javascript'"  ng-if="cmsresourceloadingcompleted"></ng-include>         </div> 

custom directive (agilesites-sidebar):

angular.module('newhorizonsapp')     .directive('agilesitessidebar', ['producttypes','$compile', function (producttypes,$compile) {     return {         restrict: 'e',         scope: true,         template: '<ng-include src="\'\'+api_host+\'api/cms/sidebar\'" onload="executeonload();"></ng-include>',         link: function (scope,elem){              scope.executeonload = function() {                  scope.cmsresourceloadingstatus(true);             };           }     }; }]); 


Comments

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

css - Make div keyboard-scrollable in jQuery Mobile? -

ruby on rails - Seeing duplicate requests handled with Unicorn -