AngularJS: Initialize model from data in HTML?

Question

I'm thinking about trying to initialize (parts of) the AngularJS model from data in the HTML, rather than doing a request to the server to fetch the data as JSON, or embed a JSON object directly in the page.

(The server currently only renders the data in HTML (not JSON), and I'd like to avoid rewriting "too much" code right now, and HTML works well with search engines. The application itself is a discussion system.)

Here follows an example of my HTML (simplified). The data embedded therein is a post ID (123456), an author ID (789), an author name (Kitty overlord) and a text message ("Kittens ~~Cats! Just kidding.~~").

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

And I'd like to construct an AngularJS controller, and initialize $scope to something like:

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

Perhaps I can use ng-init like so:

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

But then I'd be sending the data twice: once in ng-init, and once in the HTML. I think I'd rather skip the ng-init attribute somehow.

Anyway do you think this is an okay approach?
Or is it not possible / bad, and I should do something else instead?

Is there any way to avoid including the data twice? (both in the html, and in ng-init)

score 2 · Answer 1 · edited May 23 '17 at 12:22

2

Seems like will be better to store all this data in json like:

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

and then to populate it with ng-repeat like:

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

I have similar issue , may be it will be useful for you: AngularJS - Getting data inserted in dom

edited May 23 '17 at 12:22

Community

1
1

answered Aug 27 '13 at 06:02

Ivan Chernykh

41,617
13
134
146

Thanks for your answer. What you describe is actually what I meant with "embed a JSON object directly in the page". +1 because this seems to be what everyone is doing, so perhaps it's really the best approach. And because of the helpful link to your own question. — I *think* I recognize the title of your question actually, but I thought it was about something else, namely about getting data inserted *into* the DOM, rather than "extracted" from the DOM. – KajMagnus Aug 27 '13 at 07:46
glad if it helps! ( yes , my english is far from being perfect so some nuances might be unclear, sorry ) :-) – Ivan Chernykh Aug 27 '13 at 08:20

AngularJS: Initialize model from data in HTML?

1 Answers1