2013-08-27 13 views
5

AngularJS modelini HTML'deki verilerden (JSON gibi verileri almak için sunucuya bir istek yapmak yerine) veya doğrudan bir JSON nesnesini sayfaya yerleştirmeyi denemeyi düşünüyorum.AngularJS: HTML'deki verilerden modeli başlatılamıyor musunuz?

(Bu sunucu şu anda yalnızca HTML'de verileri oluşturuyor (JSON değil) ve şu anda "çok fazla" kodu yeniden yazmaktan kaçınmak istiyorum ve HTML, arama motorlarıyla iyi çalışıyor. Uygulamanın kendisi bir tartışma sistem.)

İşte benim HTML'm (basitleştirilmiş) bir örneğini izler. Burada gömülü olan veri bir posta numarası (123456), bir yazar kimliği (789), bir yazar adı (Kitty overlord) ve bir metin mesajıdır ("Kittens Kediler! Sadece şaka. ").

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

Ve bir angularjs denetleyicisi oluşturmak ve benzeri bir şey $scope başlatmak istiyorum: I

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

Ama sonra: Belki şöyle ng-init kullanabilirsiniz

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

Verileri iki kez gönderiyor olacağım: bir kez ng-init'da ve bir kez HTML'de. Sanırım bir şekilde ng-init özniteliğini atlamayı tercih ederim.

Neyse, bunun iyi bir yaklaşım olduğunu düşünüyor musunuz?
Veya mümkün değil/kötü, ve bunun yerine başka bir şey yapmalı mıyım?

Verileri iki kez dahil etmekten kaçınmanın bir yolu var mı? (Her ikisi de, ve ng-init içinde html)

cevap

2

gibi json tüm bu verileri depolamak için daha iyi olacak gibi görünüyor:

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

ve daha sonra doldurmak için ng-repeat gibi:

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

Benzer bir sorun var, sizin için yararlı olabilir olabilir: AngularJS - Getting data inserted in dom

+0

Cevabınız için teşekkürler. Açıkladığınız şey aslında "doğrudan sayfaya bir JSON nesnesini gömmek" ile kastettiğim şey. +1, çünkü herkesin yaptığı gibi görünüyor, bu yüzden belki de en iyi yaklaşım. Ve kendi sorunuz için yararlı bağlantı nedeniyle. - Ben * düşünüyorum * Sorunun başlığını fiilen tanıyorum, ama başka bir şey hakkında olduğunu düşündüm, yani DOM'den * ayıklanmaktan ziyade * veriye * eklenmiş veriyi almak * diye düşündüm. Eğer yardımcı olursa – KajMagnus

+0

memnun! (evet, ingilizcem mükemmel olmaktan uzak olduğu için bazı nüanslar açık olmayabilir, üzgünüm) :-) – Cherniv