2013-06-03 36 views
8
<html> 
<head> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script> 
</head> 
<body> 
    <div id="ajax-content-here"> 

    </div> 
</body> 
</html> 

Tôi thực sự mới đến góc cạnh nên hãy nhẹ nhàng!Sử dụng Góc chỉ trong trang được tải qua ajax

Vì vậy, ý tưởng như đã nêu ở trên trong tiêu đề - tôi tải trang của tôi với thư viện góc bao gồm trong phần đầu. Sau đó tôi tải dữ liệu (bên dưới) vào vùng chứa div bằng ajax (jquery).

<div id="angular-test"> 
    <div> 
     <label>Name:</label> 
     <input type="text" ng-model="yourName" placeholder="Enter a name here"> 
     <hr> 
     <h1>Hello {{yourName}}!</h1> 
    </div> 
</div> 

Tôi muốn bằng cách nào đó khởi tạo góc để hoạt động chỉ bên trong #angular-test vùng chứa sau khi yêu cầu ajax hoàn tất. Tôi giả sử nó có cái gì để làm với đối tượng phạm vi phải không?

Cảm ơn!

+0

Bạn nên bắt đầu bằng cách đọc: http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have -a-jquery-background – TheHippo

+0

Tôi đã đọc nó thực sự, nhưng trong trường hợp của tôi, tôi đang tạo ra một phần mới trong một dự án lớn và tôi muốn sử dụng góc chỉ trong phần này. Vì bây giờ không thể viết lại mọi thứ từ đầu bằng cách sử dụng góc cạnh Tôi muốn bắt đầu nhỏ. Nó có thể đúng không? Không có cách nào một người nào đó đã không có vấn đề này trước đây. – Krabats

+1

Sử dụng chỉ thị bằng văn bản tùy chỉnh hoặc toàn bộ "gói định tuyến" để sử dụng ajax tìm nạp HTML. Vẫn có vẻ như một ý tưởng tồi. – TheHippo

Trả lời

9

Khởi tạo góc (bao gồm tìm kiếm ứng dụng ng và biên dịch mẫu) khi DOM hoàn tất tải (trên sự kiện DOMContentLoaded). Angular không có cách nào để biết rằng DOM được thay đổi và một ứng dụng ng được thêm vào DOM sau khi nhận được phản hồi AJAX.

Vì vậy, bạn có thể thử khởi động bootstrap theo cách thủ công sau khi DOM thực sự được hoàn thành (có nghĩa là trên lời gọi jquery ajax của bạn, sau khi bạn gán cho innerHTML). Trong callback làm điều gì đó như sau:

angular.bootstrap($('#ajax-content-here')); 

Giả sử rằng các nội dung bên trong ajax-content-here đề cập đến một số ng-app. Hãy xem phần khởi tạo thủ công tại http://docs.angularjs.org/guide/bootstrap

0
<div ng-app id="angular-test"> 

Phần ng-app sẽ khởi tạo góc bên trong angular-test.

+0

Tôi nghi ngờ rằng nó sẽ được khởi tạo bởi Angular khi nó được nạp với AJAX, mặc dù ([demo] (http://plnkr.co/edit/bUYMoRFUjOlRF1VgnDVr?p=preview)). – robertklep

+0

Tôi đã thử phương pháp này lúc đầu nhưng không đi. – Krabats

Các vấn đề liên quan