AngularJS ng-view problem on Firefox
By default, multiple ng-view is not supported by AngularJS. Assume that we have some pages with different layout as the code bellow:
<div class="container-master" ng-switch="" on="layout">
<div ng-switch-when="landing" ng-view=""></div>
<div ng-switch-when="404">
<div ng-include="" src="'views/header.html'"></div>
<div ng-view=""></div>
</div>
<div ng-switch-when="default">
<div ng-include="" src="'views/header.html'"></div>
<div id="container">
<div id="sidebar-right">
<div class="site-ad">
<img src="styles/img/layout/ad_1.jpg" alt="Example Ad" title="Example Ad">
<img src="styles/img/layout/ad_2.jpg" alt="Example Ad" title="Example Ad">
</div>
</div>
<div id="main-content" ng-view=""></div>
</div>
</div>
</div>
As you can see, we have 3 ng-view directive and use ng-switch to decide which layout will be used. When running on Chrome browser, everything is fine. AngularJS uses only one ng-view (which matched with ng-switch-when). But on Firefox, the data will be put to all ng-view, but only the div which matched with ng-swith-when is shown (the other is hidden), it also sends as many request as ng-view has, too.
Currently I cannot find the solution for this case so I reorganized the HTML to use only one ng-view:
<div ng-include="" src="'views/header.html'" ng-show="layout != 'landing'"></div>
<div id="container" ng-class="{'landing-wrapper': layout != 'default'}">
<div id="sidebar-right" ng-show="layout == 'default'">
<div class="site-ad">
<img src="styles/img/layout/ad_1.jpg" alt="Example Ad" title="Example Ad">
<img src="styles/img/layout/ad_2.jpg" alt="Example Ad" title="Example Ad">
</div>
</div>
</div>
<div id="main-content" ng-view=""></div>