如何在控制器之間共享數據？
[英]How to share data between controllers?
問題描述
我必須創建一個共享數組的服務，但無法弄清楚如何在視圖中顯示其中一個數組。
(function () { 'use strict'; angular.module('ShoppingListCheckOff', []) .controller('ToBuyController', ToBuyController) .controller('AlreadyBoughtController', AlreadyBoughtController) .service('ShoppingListCheckOffService', ShoppingListCheckOffService); ToBuyController.$inject = ['ShoppingListCheckOffService']; function ToBuyController(ShoppingListCheckOffService) { var ToBuyCtrl = this; ToBuyCtrl.buyItems = ShoppingListCheckOffService.getBuyItems(); ToBuyCtrl.CheckItem = function () { ShoppingListCheckOffService.CheckItem(ToBuyCtrl.itemName, ToBuyCtrl.quantity, ToBuyCtrl.index); }; ToBuyCtrl.setBougthItems = function () { ShoppingListCheckOffService.setBougthItems(ToBuyCtrl.itemName, ToBuyCtrl.quantity); } }; AlreadyBoughtController.$inject = ['ShoppingListCheckOffService']; function AlreadyBoughtController(ShoppingListCheckOffService) { var AlreadyBoughtCtrl = this; AlreadyBoughtCtrl.bougthItems = ShoppingListCheckOffService.getBougthItems(); }; function ShoppingListCheckOffService() { var service = this; var buyItems = [ {name: 'Coockies', quantity: '10 bags'}, {name: 'Cereal', quantity: '4 boxes'}, {name: 'Orange juice', quantity: '4 botles'}, {name: 'Soda drinks', quantity: '2 botles'}, {name: 'Cerael bars', quantity: '10 bags'}, {name: 'Milk', quantity: '4 botles'} ]; var bougthItems = []; service.CheckItem = function (itemName, quantity, index) { var item = { name: itemName, quantity: quantity }; buyItems.splice(index, 1); bougthItems.push(item); }; service.getBuyItems = function () { return buyItems; }; service.setBougthItems = function (itemName, quantity) { var item = { name: itemName, quantity: quantity }; bougthItems.push(item); }; service.getBougthItems = function () { return bougthItems; }; }; })(); 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”數組。
2 個解決方案
解決方案1
0 2016-12-04 00:03:35
您應該提供一種服務方法，以某種方式標識ToBuy數組中的元素，將其刪除，然后將其添加到AlreadyBought數組中。 例如，假設我知道要移動的元素的索引，則可以執行以下操作：
service.moveToBought = function(index) {
service.bought.push(service.buy[index]);
service.buy.splice(index, 1);
}
解決方案2
0 已采納 2016-12-04 07:08:40
您的代碼不起作用的原因有兩個。
您沒有在ToBuyCtrl.CheckItem（）方法中捕獲itemName和數量。（很容易找到）
在NG-重復拼寫錯誤（boughtItem在AlreadyBoughtCtrl.boug HT項目），其中為你分配給boug 個項目的項目。 （花很多時間找到）
另外，您不需要ToBuyCtrl.setBougthItems（）方法，因為您正在將數據推送到服務中的buyedItems數組中。 如果您打算刪除它，請確保也將其從標記中刪除。
ToBuyCtrl.CheckItem = function (itemName, quantity, index) {
ShoppingListCheckOffService.CheckItem(itemName, quantity, index);
};
如何以正確的方式在Angle App中的控制器之間共享數據
[英]How to share data between controllers in angular app in the right way
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.