1

In my index.html file I have the following code:

<body>
    <div ui-view></div>
    <div ng-include="footer.html"></div>
</body>

The problem is that the footer is displayed before the dynamic content related to the active state is loaded and rendered.

I tried to use the event $viewContentLoaded but this event is fired when the view content has been loaded not when it has been compiled.

I used ng-include in index.html because my footer is generic and should be used in all the app pages.

How to solve this problem?

ahmehri
  • 756
  • 2
  • 8
  • 26

2 Answers2

0

put your angular script includes in head not at the bottom of the page. ui-view means nothing until angular is loaded.

you might also want to use a sticky footer to prevent any issue with the footer jumping about.

stick footy for bootstrap is here ... https://getbootstrap.com/examples/sticky-footer/

danday74
  • 52,471
  • 49
  • 232
  • 283
  • it's not the ui-view content that I want to display before the footer, it's the opposite. – ahmehri Mar 10 '16 at 15:10
  • so you want to display the footer before the ui-view content? sounds like a header – danday74 Mar 10 '16 at 15:17
  • sorry I made a typo, I meant: it's not the ui-view content that I want to display **after** the footer, it's the opposite. – ahmehri Mar 10 '16 at 15:21
0

Instead of assigning url to ng-include you can bind scope variable and that scope variable value can be changed with actual URL from the directive which was reused in all your views using two way binding '='

Raja Rathinam
  • 112
  • 1
  • 6
  • I should set the value of the scope variable when the content of the ui-view has been completely rendered. The problem is that I don't have the event that reflects that. – ahmehri Mar 10 '16 at 15:13
  • I suspect multiple views are associated to one controller if so you can still use $viewContentLoaded by counting if all views are loaded and rendered suppose say you have 5 views associated in your controller like this, $scope.callAfterAllViewLoaded = 0; $rootScope.$on('$viewContentLoaded', function(event){ $scope.callAfterAllViewLoaded++; if($scope.callAfterAllViewLoaded === 5){ // update to the number of views associated to this controller $scope.callAfterAllViewLoaded = 0; – Raja Rathinam Mar 11 '16 at 07:57
  • you can emit/dispatch custom event " $rootScope.$emit('dataRead') " from your view controller once the data was fetched from API, add event listener to the custom event on your footer controller which would be your parent controller of your view controller "$rootScope.$on('dataRead',function({$scope.dataRead = true}))" and bind the scope variable to ng-if='dataRead' of your footer. by default dataRead scope will be false/undefined. hope this approach helps you – Raja Rathinam Mar 16 '16 at 11:50