AngularJS: Zainicjować model z danych w HTML?

Question

Zastanawiam się nad próbą zainicjowania (części) modelu AngularJS z danych w kodzie HTML, zamiast wysyłania żądania do serwera w celu pobrania danych jako JSON lub osadzenia obiektu JSON bezpośrednio na stronie.

(Serwer obecnie renderuje tylko dane w języku HTML (nie JSON), a ja chciałbym teraz uniknąć przepisywania "zbyt wiele" kodu, a HTML działa dobrze z wyszukiwarkami Sam wniosek jest dyskusją system.)

Oto przykład mojego HTML (uproszczony). Dane w nim zawarte to: identyfikator postu (123456), identyfikator autora (789), nazwisko autora (overlord Kitty) oraz wiadomość tekstowa ("Kocięta Koty! Po prostu żartuję . ").

<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> 

I chciałbym skonstruować angularjs kontrolera i zainicjować $scope do czegoś podobnego:

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

Być może mogę użyć ng-init tak:

<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> 

ale potem Dwukrotnie wyśle ​​dane: raz w ng-init i raz w kodzie HTML. Myślę, że wolałbym jakoś pominąć atrybut ng-init.

W każdym razie, czy to podejście w porządku?
Czy to nie jest możliwe/złe, a zamiast tego powinienem zrobić coś innego?

Czy istnieje sposób na uniknięcie dwukrotnego włączenia danych? (Zarówno w html, w ng-init)

Answer 1

Wydaje się, będzie lepiej przechowywać wszystkie dane w formacie JSON jak:

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

a następnie wypełnić go z ng-repeat jak:

<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> 

Mam podobny problem, może być przydatne dla Ciebie: AngularJS - Getting data inserted in dom