如何从用的角度服务另一个控制器更新一个控制器的数据？ [英] How do I update one controller with data from another controller with a service in angular?
问题描述
我有2个控制器。第一个获得所选项目的第二次获取可用的物品。
我怎么能显示新选定的项目？
每个可用项下的按钮有一个NG单击调用一个名为的updateItem服务，我想更新的情况发生。
我一直在这一段时间的任何帮助是非常AP preciated。
- 谢谢
＆LT; DIV NG控制器=seletedItemCtrl＆GT;
＆LT; P＆GT;＆LT; I＆GT;我想更新这个项目＆lt; I＆GT /;＆LT; / P＆GT;
＆LT; DIV NG重复=项selectedItems＆GT; ＆LT; UL＆GT;
＆LT;立GT; {{item.color}}＆LT; /李＆GT;
＆LT;立GT; {{item.Distance}}＆LT; /李＆GT;
＆LT;立GT; {{item.height}}＆LT; /李＆GT;
＆LT;立GT; {{item.name}}＆LT; /李＆GT;
＆LT;立GT; {{item.year}}＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
////////////////////////////////////////////////// /
＆LT; DIV NG控制器=availableItemsCtrl＆GT;
＆LT; DIV NG重复=项availableItems＆GT;
＆LT; UL＆GT;
＆LT;立GT; {{item.color}}＆LT; /李＆GT;
＆LT;立GT; {{item.Distance}}＆LT; /李＆GT;
＆LT;立GT; {{item.height}}＆LT; /李＆GT;
＆LT;立GT; {{item.name}}＆LT; /李＆GT;
＆LT;立GT; {{item.year}}＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT;按钮NG点击='的updateItem（）'＆GT;选择项目＆lt; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
JS
VAR应用= angular.module（'对myApp'，[]）;功能availableItemsCtrl（$ rootScope，$范围）{
$ scope.availableItems = {
项目：{
项目：{
组1：[
{
色：白
距离：NA，
高度：3英尺
名：Underlift
年：1955年 }，
{
色：蓝，
距离：4M
高度：2英尺
名：Underlift
年：1956年 }，
{
色：红，
距离：NA，
高度：3英尺
名：Golen叶子，
年：1968 }，
{
色：黄，
距离：22M
高度：10英寸
名：和你在一起，
年：1988年 }
]
}， }
}
$ scope.availableItems = $ scope.availableItems.Items.Item.Group1;
} 功能seletedItemCtrl（$ rootScope，$范围）{
$ scope.seletedItem = {
项目：{
项目：{
组1：[{ 色：黑，
距离：2M，
高度：1英寸
名：从不，
年：1922 }
]
}
}
}
$ scope.selectedItems = $ scope.seletedItem.Items.Item.Group1; }
app.service（的updateItem功能（）{ 的console.log（'更新项目'）; }）;
Remeber你的 $范围不是你的模型;你的 $范围是的东西附上您的模型的。角鼓励您构建描述应用程序的行为，自己的模型对象。在这个例子中，看来你有可用项目和领域概念选定的项目。这里有一个简单的服务，为您提供了这些概念的模型：
app.factory（'项目'，函数（）{
VAR项目= {
availableItems：[]，
selectedItems：[]
};
Items.addAvailableItem =功能（项目）{
Items.availableItems.push（项目）;
};
Items.selectItem =功能（项目）{
Items.selectedItems.push（项目）;
};
返回的项目;
}）;
所以，现在你有这样的项目服务，它有一个 addAvailableItem 方法，这需要一个项目，并将其添加在 availableItems 阵列和选择信息方法，这需要一个项目，并将其添加到 selectedItems 阵列。你可以这两个阵列使用控制器的范围现在绑定到您的看法：
app.controller（'someController'，函数（$范围，项目）{
$ scope.availableItems = Items.availableitems;
};
下面是一个的jsfiddle演示使用你作为一个起点，提供了（这也显示出一种更好的方式在模块中定义控制器）在code概念：的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屋！
