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
Post a Comment