AngularJS: Инициализировать модель из данных в HTML?

Question

Я думаю о попытке инициализировать (части) модели AngularJS из данных в HTML, вместо того, чтобы делать запрос на сервер для извлечения данных как JSON или встраивать объект JSON непосредственно на страницу.

(В настоящее время сервер отображает данные только в HTML (а не JSON), и я бы хотел избежать переписывания «слишком большого» кода прямо сейчас, а HTML хорошо работает с поисковыми системами. Приложение само по себе является дискуссией system.)

Далее следует пример моего HTML (упрощенного). Введенные в него данные - это идентификатор сообщения (123456), авторский идентификатор (789), имя автора (Kitty overlord) и текстовое сообщение («Котята Кошки! Шутки. «).

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

Но тогда я 'd посылать данные дважды: один раз в ng-init и один раз в HTML. Я думаю, что я бы скорее пропустил атрибут ng-init.

В любом случае, как вы думаете, это хороший подход?
Или это невозможно/плохо, и я должен сделать что-то еще вместо этого?

Есть ли способ избежать включения данных дважды? (Как в HTML, так и в ng-init)

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