創建具有虛擬內容通過AngularJS

Question

的更新列表視圖我使用AngularJS來構建應用程序，允許用戶創建報告，然後提交。標題和創建時間自動生成（基於用戶輸入），並將報告摘要添加到用戶所做的所有報告的列表中。

該表最終將從服務器端JSON字符串中填充（並且新條目將從本地會話中添加到服務器中），但對於本地測試，我需要一種方法在表中添加到表中本地客戶端會話。

用戶將轉到一個可以創建報告的單獨頁面：一旦他們點擊「運行報告」，報告摘要應該添加到表格中，報告名稱和創建日期是自動從用戶的輸入填充。該報告製作界面是不同的網頁，必然一個不同的控制範圍從「主」頁面，在這裏報告摘要的名單駐留。

現在，這裏是我的問題：從什麼不同的控制器$scope是提交一份報告彙總表最好的，最角tastic方式（亦稱本地模型）？

我的代碼看起來是這樣的（記住它可能是可怕的，而且我打算重構它！）：

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單擊表單字段中傳遞對象的create action。

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