通过 AngularJS 创建带有虚拟内容的更新列表视图

Question

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

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

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

现在，这是我的问题：向表格提交报告摘要的最佳、最符合 Angular 的方式是什么（又名本地模型）来自不同的控制器 $scope?

我的代码看起来像这样（记住它可能很糟糕，我打算重构它！）：

controllers.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 元素放入数组中，但我不知道如何在当前控制器$scope 之外这样做。我尝试将数组的代码放在控制器之外$scope:

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

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

Answer 2

您可以使用广播将对象传递到不同的范围。

controllerOne

$rootScope.$broadcast('ReportSubmit', $scope.reportObject);

数据可以是您控制器中的对象。

然后它在另一个控制器中侦听广播，您可以在其中定义数据并对其进行操作并可以访问它..

controllerTwo

$scope.$on('ReportSubmit', function(event, data) {
   $scope.reportObject = data;
};

对于第二个问题，当你创建新报表时，如果你在前端有模型绑定，你可以这样做。

您要绑定到的这个函数 ng-click 从表单字段传入您的对象的创建操作。

$scope.createNewReport = function(object) {
// Assign object to var
var newReport = object;

//Add new object to data from in memory object.
$scope.reportList.push(newReport);
};

您可以通过使用ajax传递reportList对象将其传回控制器或服务器

找到一个可能对您有所帮助的小提琴。 http://jsfiddle.net/yh3Ds/24/