AngularJS không chạy khi load bằng AJAX từ partial view

Hôm nay team mình làm một project của khách hàng liên quan đếm AngularJS.

Cả bọn chỉ tìm hiểu sơ lược về framework này nên làm tới đâu học tới đó, làm tới đâu thì ăn…bug tới đó. Hôm nay ăn phải con bug khá là ngu nhưng cũng nhờ nó mà cả team thêm tí kiến thức về AngularJS.

Số là từ trang chính, người dùng click lên một cái hyperlink thì nó sẽ load một cái partial view bằng AJAX. Trên partial view đó các thẻ html element như input, select bind dữ liệu bằng AngularJS.

Ớ! Nhưng mà sao nó chẳng chịu bind dữ liệu gì cả, nó còn hiển cả cấu trúc AngularJS lên. Mất gần hai giờ đồng hồ ngồi xà quần, cả bọn mới phát hiện ra là khi load đóng html của partial view bằng AJAX thì AngularJS cần được kích lại hay boostrap nó thì nó mới hiểu mã code của partial view của chúng ta.

Vì sao phải cần như thế nhỉ? Vì framework AngularJS đã được load từ trang chính và nó làm hết mọi việc cần thiết cho cây html của trang chính và sau đó nó nghỉ ngơi sau khi xong hết mọi việc. Nên khi có html mới từ partial view trả về thì ta phải goi nó dạy làm việc tiếp đi chớ ^^

Đoạn mã sau sẽ giúp chúng ta giải quyết được vấn đề.

<script>
    angular.element(document).ready(function () {
        angular.bootstrap($("#appElement"), ['myApp']); // appElement là thẻ html mà chúng ta định nghĩa ng-app is the html element on which you define ng-app, myApp là tên của ứng dụng    
   });
</script>

Các bạn nhớ đặt đoạn mã trên vào sự kiện sau khi ajax load partial view xong.

Bug ơi là bug! Mày thật là làm khổ đời coder chúng tao. Hix hix!