0

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

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

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

现在，这是我的问题：从不同的控制器向表（又名本地模型）提交报告摘要的最佳、最具 Angular 风格的方法是什么？ $scope

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

控制器.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：

控制器.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 字符串。换句话说，报告在成功发送到服务器并由服务器生成之前一直保持在本地。在生成报告之前，用户无法阅读该报告，但如果服务器由于某种原因无法接受生成新报告的请求，该报告也将保留在本地保存。

这就是说，我已经看到建议使用service 或 factory的示例。这是最明智的做法吗？这比我现在设置的简单数组更好吗？

4

2 回答 2

1

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

控制器一

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

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

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

控制器二

$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);
};

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

找到了一个可能会帮助你的小提琴。http://jsfiddle.net/yh3Ds/24/

于 2013-04-05T18:35:30.193 回答
1

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

于 2013-04-06T01:52:12.973 回答