Question

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

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

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

现在，我的问题是：从表格中提交报告摘要的最佳，最具角度的方式（又称本地模型）来自不同的控制器 $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

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

<强> controllerOne

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

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

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

<强> controllerTwo

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

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

此函数绑定到ng-单击从表单字段传入对象的创建操作。

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

Answer 2

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

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

2 个答案: