AngularJS:从HTML中的数据初始化模型?

时间:2013-08-27 05:34:03

标签: angularjs angularjs-scope

我正在考虑尝试从HTML中的数据初始化(部分)AngularJS模型,而不是向服务器请求将数据作为JSON获取,或者直接在页面中嵌入JSON对象。 / p>

(服务器目前只用HTML(而不是JSON)呈现数据,我现在想避免重写“太多”代码,并且HTML适用于搜索引擎。 应用程序本身是一个讨论系统。)

下面是我的HTML(简化)示例。其中嵌入的数据是帖子ID(123456),作者ID(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>

然后我会发送两次数据:一次在ng-init,一次在HTML中。我想我不得不以某种方式跳过ng-init属性。

无论如何,你认为这是一个好的方法吗? 或者它不可能/不好,我应该做别的事情呢?

有没有办法避免两次包含数据? (在html和ng-init中)

1 个答案:

答案 0 :(得分:2)

似乎最好将所有这些数据存储在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