AngularJS ng-view problem on Firefox
Khanh is a full stack web developer with over 15 years of experience developing for the web
Search for a command to run...
Khanh is a full stack web developer with over 15 years of experience developing for the web
No comments yet. Be the first to comment.
Elevate your bus reservation experience (or even movie, theater, train, ship, plane tickets) with the React Bus Seat Map Picker – a sophisticated and meticulously crafted script designed exclusively for bus seat bookings. Engineered with strict TypeS...

In previous blog, I migrated all posts from my WordPress to Hashnode at https://blog.donamkhanh.com. Now I create a simple landing page for my main domain and hosted on Github Page. You can access at https://donamkhanh.com. In feature, I'm going to h...

I just finished migrating my blog from Wordpress (self hosted on DigitalOcean) to Hashnode. How did I migrate? I don't have too many articles on Wordpress but I don't like doing it manually so the first thing I did was look to see if there was an aut...

Dự án mình đang làm có yêu cầu sử dụng Azure Active Directory (AAD) để lưu trữ thông tin người dùng & xác thực đăng nhập các kiểu. Ngoài các trường thông tin cơ bản mà AAD hỗ trợ ra thì dự án mình cần lưu thêm 1 số thông tùy chọn khác cho người dùng....

Introduction This is a concise front-end application developed with Angular. You can create a beautiful form with drag and drop visualization. You can get inspiration from it to make a draggable form; at the same time, you can also modify it to suit ...

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>