javascript - 通过 AngularJS 创建带有虚拟内容的更新 ListView

Question

我正在使用 AngularJS 构建一个应用程序，允许用户构建报告然后提交它们。标题和创建时间会自动生成(根据用户输入)，报告摘要会添加到用户已创建的所有报告的列表中。

该表最终将由服务器端 JSON 字符串填充(并且新条目将从本地 session 添加到服务器)，但对于我的本地测试，我需要一种在本地 session 期间添加到表的方法客户端 session 。

用户将转到一个单独的页面，在其中可以创建报告:单击“运行报告”后，报告摘要应添加到表中，其中会自动显示报告的名称和创建日期根据用户的输入填充。报告创建界面位于不同的页面上，因此与报告摘要列表所在的“主”页面不同的 Controller 范围不同。

现在，我的问题是:从不同的 Controller 向表格提交报告摘要的最佳、最 Angular 风格的方式是什么(也称为本地模型)> $scope？

我的代码如下所示(请记住，它可能很糟糕，我计划重构它!):

Controller .js:

var MainCtrl = function($scope) {
  $scope.reports = [
    {name:'Trx Summary', date:'Mar 20, 2013 @ 12:30PM'},
    {name:'Trx Summary', date:'Mar 20, 2013 @ 12:30PM'}
  ];
};

_dat_partial_view.html:

<div ng-controller="MainCtrl" class="row-fluid">
  <table class="table table-striped">
    ...
    <tr ng-repeat="report in reports">
      <td>
        <p>{{report.name}} <span class="label label">Generating</span></p>
      </td>
      <td>
        <dl class="no-margin">
          <dt>Date Range</dt>
          <dd>Mar 3, 2013 - Mar 13, 2013</dd>
          <dt>Generated</dt>
          <dd>{{report.date}}</dd>
        </dl>
      </td>
      ...
    </tr>    

这成功创建了一些虚拟内容，用两个条目填充表格。

我需要做什么来创建这样一个动态列表添加器？我很确定我需要push元素到数组中，但我不知道如何在当前 Controller $scope之外执行此操作。我尝试将数组的代码放置在 Controller $scope 之外:

Controller .js:

reports = [
        {name:'Trx Summary', date:'Mar 20, 2013 @ 12:30PM'},
        {name:'Trx Summary', date:'Mar 20, 2013 @ 12:30PM'}
      ];

var MainCtrl = function($scope) {};

这只是从表中删除了两个虚拟条目，因此不起作用。

有什么想法吗？

问题2

另一个问题:创建填充表格的动态内容列表的最佳方式是什么？该应用将创建报告，并将其存储在本地。然后，它将尝试将新报告推送到服务器，服务器将生成报告并理论上发送回连接到 JSON 字符串的结果。换句话说，报告将一直保留在本地，直到成功发送到服务器并由服务器生成为止。在生成报告之前，用户无法读取报告，但如果服务器由于某种原因无法接受生成新报告的请求，则报告也将保留在本地保存。

这就是说，我见过examples建议使用服务或工厂。这是最明智的做法吗？这比我现在设置的简单数组更好吗？

Answer 1

您应该在这里使用服务，我认为您引用的示例是正确的方法