如何使用角度服务从另一个控制器更新一个控制器的数据? [英] How do I update one controller with data from another controller with a service in angular?
问题描述
我有 2 个控制器.第一个获取所选项目，第二个获取可用项目.
如何显示新选择的项目?
每个可用项目下方的按钮都有一个 ng-click，它调用一个名为 updateItem 的服务，我希望在其中进行更新.
我已经为此工作了一段时间，非常感谢任何帮助.-谢谢
<p><i>我想更新这个项目</i></p><div ng-repeat="selectedItems 中的项目"><ul><li>{{item.color}}</li><li>{{item.Distance}}</li><li>{{item.height}}</li><li>{{item.name}}</li><li>{{item.year}}</li></div >//////////////////////////////////////////////////<div ng-controller="availableItemsCtrl"><div ng-repeat="可用项目中的项目"><ul><li>{{item.color}}</li><li>{{item.Distance}}</li><li>{{item.height}}</li><li>{{item.name}}</li><li>{{item.year}}</li><button ng-click = 'updateItem()' >选择项目</button>
JS
var app = angular.module('myApp', []);函数 availableItemsCtrl($rootScope, $scope){$scope.availableItems = {项目": {物品": {第 1 组":[{白颜色"，"距离": "NA",高度":3英尺"，"name": "底托","年份": "1955"},{"颜色": "蓝色","距离": "4M",高度":2英尺"，"name": "底托","年份": "1956"},{红色"，"距离": "NA","高度": "3 英尺","name": "金叶","年份": "1968"},{"颜色": "黄色","距离": "22M","高度": "10 英寸","name": "一起","年份": "1988"}]},}}$scope.availableItems = $scope.availableItems.Items.Item.Group1;}函数 seletedItemCtrl($rootScope, $scope){$scope.seletedItem = {项目":{物品":{组1":[{颜色:黑色"，"距离": "2M",高度":1英寸"，"name": "从不",年份":1922"}]}}}$scope.selectedItems = $scope.seletedItem.Items.Item.Group1;}app.service("updateItem", function(){console.log('更新项目');});记住你的 $scope 不是你的模型；您的 $scope 是您将模型附加到的东西.Angular 鼓励您构建自己的模型对象来描述应用程序的行为.在此示例中，您似乎具有可用项目"和选定项目"的域概念.这是一个简单的服务，可为您提供这些概念的模型:
app.factory('Items', function () {变量项目 = {可用项目:[]，所选项目:[]};Items.addAvailableItem = 函数(项目){Items.availableItems.push(item);};Items.selectItem = 函数(项目){Items.selectedItems.push(item);};退换货品;});所以现在你有了这个 Items 服务，它有一个 addAvailableItem 方法，它接受一个项目并将它添加到 availableItems 数组，和一个 selectItem 方法，它接受一个项目并将其添加到 selectedItems 数组中.您现在可以使用控制器的作用域将这两个数组绑定到您的视图:
app.controller('someController', function ($scope, Items) {$scope.availableItems = Items.availableItems;};这是一个 jsFiddle，它使用您提供的代码作为起点来演示概念(它还演示了在模块中定义控制器的更好方法):http://jsfiddle.net/BinaryMuse/kV4mK/
I have 2 controllers. The first gets the selected item the second gets the available items.
How can I display the new selected item?
The button underneath each available item has a ng-click that calls a service called updateItem where I would like the update to happen.
I have been working on this for awhile any help is much appreciated. -Thanks
<div ng-controller="seletedItemCtrl">
<p><i>I want to update this item</i></p>
<div ng-repeat="item in selectedItems">
<ul>
<li>{{item.color}}</li>
<li>{{item.Distance}}</li>
<li>{{item.height}}</li>
<li>{{item.name}}</li>
<li>{{item.year}}</li>
</ul>
</div>
</div >
///////////////////////////////////////////////////
<div ng-controller="availableItemsCtrl">
<div ng-repeat="item in availableItems">
<ul>
<li>{{item.color}}</li>
<li>{{item.Distance}}</li>
<li>{{item.height}}</li>
<li>{{item.name}}</li>
<li>{{item.year}}</li>
</ul>
<button ng-click = 'updateItem()' >select item</button>
</div>
</div>
JS
var app = angular.module('myApp', []);
function availableItemsCtrl($rootScope, $scope){
$scope.availableItems = {
"Items": {
"Item": {
"Group1": [
{
"color": "White",
"Distance": "NA",
"height": "3ft",
"name": "Underlift",
"year": "1955"
},
{
"color": "blue",
"Distance": "4M",
"height": "2ft",
"name": "Underlift",
"year": "1956"
},
{
"color": "red",
"Distance": "NA",
"height": "3ft",
"name": "Golen Leaf",
"year": "1968"
},
{
"color": "yellow",
"Distance": "22M",
"height": "10in",
"name": "Together",
"year": "1988"
}
]
},
}
}
$scope.availableItems = $scope.availableItems.Items.Item.Group1;
}
function seletedItemCtrl($rootScope, $scope){
$scope.seletedItem = {
"Items":{
"Item":{
"Group1":[{
"color": "black",
"Distance": "2M",
"height": "1in",
"name": "never",
"year": "1922"
}
]
}
}
}
$scope.selectedItems = $scope.seletedItem.Items.Item.Group1;
}
app.service("updateItem", function(){
console.log('update item');
});
Remeber that your $scope is not your model; your $scope is the thing you attach your model to. Angular encourages you to build your own model objects that describe your application's behavior. In this example, it seems you have domain concepts of "available items" and "selected items." Here's a simple service that gives you a model for those concepts:
app.factory('Items', function () {
var Items = {
availableItems: [],
selectedItems: []
};
Items.addAvailableItem = function (item) {
Items.availableItems.push(item);
};
Items.selectItem = function (item) {
Items.selectedItems.push(item);
};
return Items;
});
So now you have this Items service, which has an addAvailableItem method, which takes an item and adds it to the availableItems array, and a selectItem method, which takes an item and adds it to the selectedItems array. You can now bind those two arrays to your view using a controller's scope:
app.controller('someController', function ($scope, Items) {
$scope.availableItems = Items.availableItems;
};
Here's a jsFiddle that demonstrates the concept using the code you provided as a starting point (it also demonstrates a better way to define your controllers in a module): http://jsfiddle.net/BinaryMuse/kV4mK/
这篇关于如何使用角度服务从另一个控制器更新一个控制器的数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
