AngularJS: Khởi tạo mô hình từ dữ liệu trong HTML?

Question

Tôi đang nghĩ về việc cố gắng khởi tạo (các phần) mô hình AngularJS từ dữ liệu trong HTML, thay vì thực hiện yêu cầu tới máy chủ để lấy dữ liệu dưới dạng JSON hoặc nhúng trực tiếp đối tượng JSON vào trang.

(Máy chủ hiện chỉ hiển thị dữ liệu bằng HTML (không phải JSON) và tôi muốn tránh viết lại mã "quá nhiều" ngay bây giờ và HTML hoạt động tốt với các công cụ tìm kiếm Bản thân ứng dụng là cuộc thảo luận hệ thống.)

Dưới đây là ví dụ về HTML của tôi (được đơn giản hóa). Dữ liệu được nhúng trong đó là ID bài đăng (123456), ID tác giả (789), tên tác giả (Kitty overlord) và tin nhắn văn bản ("Mèo con Mèo! Chỉ cần đùa thôi. ").

<div id="post-123456"> 
    <div class="dw-p-hd"> 
    By <span data-dw-u-id="789">Kitty overlord</span> 
    </div> 
    <div class="dw-p-bd"> 
    <p>Kittens</p><p><strike>Cats! Just kidding.</strike></p> 
    </div> 
</div> 

Và tôi muốn xây dựng một bộ điều khiển AngularJS, và khởi $scope một cái gì đó như:

$scope = { 
    postId = 123456, 
    authorId = 789, 
    text = 'Kittens ....', 
} 

Có lẽ tôi có thể sử dụng ng-init như vậy:

<div id="post-123456" 
    ng-controller="CommentCtrl" 
    ng-init="{ postId =..., authorId =..., text =... }">  <--- look here 
    <div class="dw-p-hd"> 
    By <span data-dw-u-id="789">Kitty overlord</span> 
    </div> 
    <div class="dw-p-bd"> 
    <p>Kittens...</p> 
    </div> 
</div> 

Nhưng sau đó tôi đang gửi dữ liệu hai lần: một lần trong ng-init và một lần trong HTML. Tôi nghĩ rằng tôi muốn bỏ qua các thuộc tính ng-init bằng cách nào đó.

Dù sao bạn có nghĩ đây là cách tiếp cận tốt không?
Hoặc là không thể/xấu, và tôi nên làm một cái gì đó khác để thay thế?

Có cách nào để tránh bao gồm dữ liệu hai lần không? (Cả trong html, và trong ng-init)

Answer 1

Có vẻ như sẽ được tốt hơn để lưu trữ tất cả các dữ liệu này trong json như:

//... 
    posts: [ 
     { postId : 123456, 
     authorId : 789, 
     text : 'Kittens ....' }, 
     { postId : 123457, 
     authorId : 790, 
     text : 'Puppies....' } 
    ] 
    //... 

và sau đó để cư nó với ng-repeat như:

<div ng-repeat="post in posts" id="{{post.postId}}" 
    ng-controller="CommentCtrl" >  
    <div class="dw-p-hd"> 
     By <span data-dw-u-id="{{post.authorId}}">Kitty overlord</span> 
    </div> 
    <div class="dw-p-bd"> 
     <p>{{post.text}}</p> 
    </div> 
    </div> 

Tôi có vấn đề tương tự, có thể sẽ hữu ích cho bạn: AngularJS - Getting data inserted in dom