#angular-nested-include
angular-nested-include is an angular.js module that decorates ng-include to allow
running an expression after all nested ng-include finished loading.
Get angular-nested-include:
- download the release (or angular-nested-include)
- via Bower: by running
$ bower install angular-nested-includefrom your console
Add angularNestedInclude dependency to your app.
--------- app.js ---------
angular.module("myApp",['angularNestedInclude'])
.controller("myCtrl",function(scope){
scope.callAfterLoad= function(){
//innerDiv should be visible in this function
}
})
--------- index.html -------------
<html ng-app="myApp">
<script type="text/ng-template" id="/outerTemplate.html">
<div ng-include="'/innerTpl.html'"></div>
</script>
<script type="text/ng-template" id="/innerTemplate.html">
<div id="innerDiv"></div>
</script>
<body ng-controller="myCtrl">
<div ng-include="'/outerTemplate.html'" on-nested-load="callAfterLoad()"></div>
</body>
</html>
angular-nested-include decorates all ng-include directives.
This can cause unexpected slowdowns and might not interact well with other modules that modify or depend on ng-cinlude.