¿Cómo actualizo un controlador con datos de otro controlador con un servicio en angular?
Tengo 2 controladores. El primero obtiene el elemento seleccionado, el segundo obtiene los elementos disponibles.
¿Cómo puedo mostrar el nuevo elemento seleccionado?
El botón debajo de cada elemento disponible tiene un clic de llamada que llama a un servicio llamado updateItem donde me gustaría que se realizara la actualización.
He estado trabajando en esto por un tiempo, cualquier ayuda es muy apreciada. -Gracias
<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');
});