AngularJS：HTMLのデータからモデルを初期化しますか？

Question

私は、サーバーにJSONとしてデータを取得する要求を出すのではなく、HTMLのデータからAngularJSモデルの一部を初期化しようとしているか、ページに直接JSONオブジェクトを埋め込むことを考えています。

（サーバーは現在、JSONではなくHTMLでデータをレンダリングしていますが、現在は「あまりにも多くの」コードを書き直すことは避けたいと思いますし、HTMLは検索エンジンでうまく機能します。 アプリケーション自体はディスカッションですシステム）。

私のHTML（簡体字）の例を以下に示します。その中に埋め込まれたデータは、ポストID（123456）、作者ID（789）、作者名（キティオーバーロード）及びテキストメッセージ（"キツンズ キャッツ！ちょうど冗談。 "）である。

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

そして、私はAngularJSコントローラを構築したい、とのようなものに$scopeを初期化したい：

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

おそらく、私はそうのようなng-initを使用することができます。

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

をしかし、私ng-initに1回、HTMLに1回データを2回送信しています。私はむしろ何とかng-init属性をスキップすると思います。

とにかくこれは大丈夫だと思いますか？
それは可能ではありませんか悪いですか？代わりに何かをする必要がありますか？

データを2回含むことを避ける方法はありますか？ （両方、およびng-initでHTMLで）

Answer 1

のようなJSONにすべてのデータを保存するために良くなるように思える：

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

し、その後でそれを埋めるためにng-repeatのような：

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

私は似たような問題がある、それはあなたのために役立つことがあります：AngularJS - Getting data inserted in dom