如何在控制器之間共享數據？

我必須創建一個共享數組的服務，但我無法弄清楚如何在視圖中顯示其中一個數組。如何在控制器之間共享數據？

(function() { 
 
\t 'use strict'; 
 

 
\t angular.module('ShoppingListCheckOff', []) 
 
\t .controller('ToBuyController', ToBuyController) 
 
\t .controller('AlreadyBoughtController', AlreadyBoughtController) 
 
\t .service('ShoppingListCheckOffService', ShoppingListCheckOffService); 
 

 
\t ToBuyController.$inject = ['ShoppingListCheckOffService']; 
 
\t function ToBuyController(ShoppingListCheckOffService) { 
 
\t \t var ToBuyCtrl = this; 
 

 
\t \t ToBuyCtrl.buyItems = ShoppingListCheckOffService.getBuyItems(); 
 

 
\t \t ToBuyCtrl.CheckItem = function() { 
 
\t \t \t ShoppingListCheckOffService.CheckItem(ToBuyCtrl.itemName, ToBuyCtrl.quantity, ToBuyCtrl.index); 
 
\t \t }; 
 

 
\t \t ToBuyCtrl.setBougthItems = function() { 
 
\t \t \t ShoppingListCheckOffService.setBougthItems(ToBuyCtrl.itemName, ToBuyCtrl.quantity); 
 
\t \t } 
 
\t }; 
 

 
\t AlreadyBoughtController.$inject = ['ShoppingListCheckOffService']; 
 
\t function AlreadyBoughtController(ShoppingListCheckOffService) { 
 
\t \t var AlreadyBoughtCtrl = this; 
 

 
\t \t AlreadyBoughtCtrl.bougthItems = ShoppingListCheckOffService.getBougthItems(); 
 
\t }; 
 

 
\t function ShoppingListCheckOffService() { 
 
\t \t var service = this; 
 

 
\t \t var buyItems = [ 
 
\t \t \t {name: 'Coockies', quantity: '10 bags'}, 
 
\t \t \t {name: 'Cereal', quantity: '4 boxes'}, 
 
\t \t \t {name: 'Orange juice', quantity: '4 botles'}, 
 
\t \t \t {name: 'Soda drinks', quantity: '2 botles'}, 
 
\t \t \t {name: 'Cerael bars', quantity: '10 bags'}, 
 
\t \t \t {name: 'Milk', quantity: '4 botles'} 
 
\t \t ]; 
 

 
\t \t var bougthItems = []; 
 

 
\t \t service.CheckItem = function (itemName, quantity, index) { 
 
\t \t \t var item = { 
 
\t \t \t \t name: itemName, 
 
\t \t \t \t quantity: quantity 
 
\t \t \t }; 
 
\t \t \t buyItems.splice(index, 1); 
 
\t \t \t bougthItems.push(item); 
 
\t \t }; 
 

 
\t \t service.getBuyItems = function() { 
 
\t \t \t return buyItems; 
 
\t \t }; 
 

 
\t \t service.setBougthItems = function (itemName, quantity) { 
 
\t \t \t var item = { 
 
\t \t \t \t name: itemName, 
 
\t \t \t \t quantity: quantity 
 
\t \t \t }; 
 
\t \t \t bougthItems.push(item); 
 
\t \t }; 
 

 
\t \t service.getBougthItems = function() { 
 
\t \t \t return bougthItems; 
 
\t \t }; 
 
\t }; 
 
})(); 
 

 
In the app.js i have created an "ShoppingListCheckService" service that shares the array of "ToBuy" and "AlreadyBought".

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="ShoppingListCheckOff"> 
 
    <div class="container"> 
 
    <h1>Shopping List Check Off</h1> 
 

 
    <div class="row"> 
 

 
    <!-- To Buy List --> 
 
    <div class="col-md-6" ng-controller="ToBuyController as ToBuyCtrl"> 
 
    <h2>To Buy:</h2> 
 
    <ul> 
 
     <li ng-repeat="buyItem in ToBuyCtrl.buyItems">{{buyItem.quantity}} - {{buyItem.name}}<button class="btn btn-default" ng-click="ToBuyCtrl.CheckItem(buyItem.quantity, buyItem.name, $index) && ToBuyCtrl.setBougthItems(ToBuyCtrl.itemName, ToBuyCtrl.quantity);"><span class="glyphicon glyphicon-ok"></span> Bought</button></li> 
 
    </ul> 
 
    <div class="emptyMessage" ng-if="ToBuyCtrl.buyItems.length === 0">Everything is bought!</div> 
 
    </div> 
 

 
    <!-- Already Bought List --> 
 
    <div class="col-md-6" ng-controller="AlreadyBoughtController as AlreadyBoughtCtrl"> 
 
    <h2>Already Bought:</h2> 
 
    <ul> 
 
     <li ng-repeat="boughtItem in AlreadyBoughtCtrl.boughtItems">{{boughtItem.quantity}} - {{boughtItem.name}}</li> 
 
    </ul> 
 
    <div class="emptyMessage" ng-if="AlreadyBoughtCtrl.boughtItems.lenght === 0">Nothing bought yet.</div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
</body>

在HTML我管理，以顯示第一陣列，但我無法弄清楚如何將項目從「ToBuy」陣列移動到「AlreadyBought」陣列。

來源

2016-12-03 alejandrohtadinom

的原因，你的代碼不工作是因爲兩個原因。

你沒有趕上ITEMNAME和數量ToBuyCtrl.CheckItem（）方法。在AlreadyBoughtCtrl.boug（很容易找到）
拼寫錯誤在你的NG-重複（boughtItem HT項目）你在哪裏分配物品到boug th項目。（花了很多時間去尋找）

而且，你不需要ToBuyCtrl.setBougthItems（）方法，因爲你是在你的服務將數據推送到boughtItems陣列。如果您打算刪除它，請務必將其從標記中刪除。

ToBuyCtrl.CheckItem = function (itemName, quantity, index) { 
      ShoppingListCheckOffService.CheckItem(itemName, quantity, index); 
     };

JSFiddle

來源

2016-12-04 07:08:40

您應該提供一種服務方法，以某種方式標識ToBuy數組中的元素，將其刪除，然後將其添加到AlreadyBought數組中。例如，假設我知道元素的索引移動，我可以做這樣的事情：

service.moveToBought = function(index) { 
    service.bought.push(service.buy[index]); 
    service.buy.splice(index, 1); 
}

JSFiddle

來源

2016-12-04 00:03:35 ChiefTwoPencils

如何在控制器之間共享數據？

回答

相關問題