Passando i dati tra i controller in Angular JS?

Ho un controller di base che visualizza i miei prodotti,

App.controller('ProductCtrl',function($scope,$productFactory){
     $productFactory.get().success(function(data){
           $scope.products = data;
     });
});

A mio avviso, sto visualizzando questi prodotti in un elenco

<ul>
    <li ng-repeat="product as products">
        {{product.name}}
    </li>
</ul

Quello che sto cercando di fare è quando qualcuno fa clic sul nome del prodotto, ho un'altra vista chiamata carrello in cui questo prodotto viene aggiunto.

 <ul class="cart">
      <li>
          //click one added here
      </li>
      <li>
          //click two added here
      </li>
 </ul>

Quindi il mio dubbio qui è, come passare questi prodotti cliccati dal primo controller al secondo? ho pensato che anche il carrello dovrebbe essere un controller.

Gestisco l'evento click usando la direttiva. Inoltre sento che dovrei usare il servizio per ottenere le funzionalità sopra appena non riesco a capire come? perché il carrello sarà predefinito il numero di prodotti aggiunti potrebbe essere 5/10 a seconda dell'utente della pagina. Quindi vorrei mantenere questo generico.

Aggiornare:

Ho creato un servizio per trasmettere e nel secondo controller lo ricevo. Ora la query è come posso aggiornare dom? Dal momento che la mia lista per eliminare il prodotto è piuttosto hardcoded.

Dalla descrizione, sembra che dovresti usare un servizio. Dai un'occhiata a http://egghead.io/lessons/angularjs-sharing-data-between-controllers e al servizio AngularJS che passa i dati tra i controller passa i per vedere alcuni esempi.

È possibile definire il servizio del prodotto (come una fabbrica) in quanto tale:

app.factory('productService', function() {
  var productList = [];

  var addProduct = function(newObj) {
      productList.push(newObj);
  };

  var getProducts = function(){
      return productList;
  };

  return {
    addProduct: addProduct,
    getProducts: getProducts
  };

});

La dipendenza inietta il servizio in entrambi i controller.

Nel tuo ProductController, definisci alcune azioni che aggiungono l'oggetto selezionato all'array:

app.controller('ProductController', function($scope, productService) {
    $scope.callToAddToProductList = function(currObj){
        productService.addProduct(currObj);
    };
});

Nel tuo CartController, ottieni i prodotti dal servizio:

app.controller('CartController', function($scope, productService) {
    $scope.products = productService.getProducts();
});

come passare questi prodotti cliccati dal primo controller al secondo?

Al clic puoi chiamare il metodo che invoca la trasmissione :

$rootScope.$broadcast('SOME_TAG', 'your value');

e il secondo controller ascolterà su questo tag come:

$scope.$on('SOME_TAG', function(response) {
      // ....
})

Dato che non possiamo iniettare $ scope nei servizi, non c'è niente come un singleton $ scope.

Ma possiamo iniettare $rootScope. Pertanto, se si memorizza valore nel servizio, è possibile eseguirlo $rootScope.$broadcast('SOME_TAG', 'your value');nel corpo del servizio. (Vedi la descrizione di @Charx sui servizi)

app.service('productService',  function($rootScope) {/*....*/}

Controlla un buon articolo su $ broadcast , $ emit

Soluzione senza creare servizio, usando $ rootScope:

Per condividere le proprietà tra i controller delle app puoi usare Angular $ rootScope. Questa è un'altra opzione per condividere i dati, mettendoli in modo che le persone ne siano a conoscenza.

Il modo preferito di condividere alcune funzionalità tra i controller è Servizi, per leggere o modificare una proprietà globale è possibile utilizzare $ rootscope.

var app = angular.module('mymodule',[]);
app.controller('Ctrl1', ['$scope','$rootScope',
  function($scope, $rootScope) {
    $rootScope.showBanner = true;
}]);

app.controller('Ctrl2', ['$scope','$rootScope',
  function($scope, $rootScope) {
    $rootScope.showBanner = false;
}]);

Usando $ rootScope in un modello (accedi alle proprietà con $ root):

<div ng-controller="Ctrl1">
    <div class="banner" ng-show="$root.showBanner"> </div>
</div>

Puoi farlo con due metodi.

1. Usando $rootscope, ma non lo consiglio. Il $rootScopeè il più in alto portata. Un'app può avere solo una $rootScopeche verrà condivisa tra tutti i componenti di un'app. Quindi si comporta come una variabile globale.

2. Utilizzando i servizi. Puoi farlo condividendo un servizio tra due controller. Il codice per l'assistenza può essere simile al seguente:

   app.service('shareDataService', function() {
       var myList = [];
   
       var addList = function(newObj) {
           myList.push(newObj);
       }
   
       var getList = function(){
           return myList;
       }
   
       return {
           addList: addList,
           getList: getList
       };
   });

   Puoi vedere il mio violino qui .

Un modo ancora più semplice per condividere i dati tra i controller è l'utilizzo di strutture di dati nidificate. Invece di, per esempio

$scope.customer = {};

possiamo usare

$scope.data = { customer: {} };

La dataproprietà verrà ereditata dall'ambito padre in modo da poter sovrascrivere i suoi campi, mantenendo l'accesso da altri controller.

angular.module('testAppControllers', [])
    .controller('ctrlOne', function ($scope) {
        $scope.$broadcast('test');
    })
    .controller('ctrlTwo', function ($scope) {
        $scope.$on('test', function() {
        });
    });

possiamo archiviare i dati in sessione e usarli ovunque nel nostro programma.

$window.sessionStorage.setItem("Mydata",data);

Un altro posto

$scope.data = $window.sessionStorage.getItem("Mydata");

Ho visto le risposte qui e sta rispondendo alla domanda sulla condivisione dei dati tra i controller, ma cosa devo fare se desidero che un controller informi l'altro del fatto che i dati sono stati modificati (senza utilizzare la trasmissione)? FACILE! Basta usare il famoso modello di visitatore:

myApp.service('myService', function() {

    var visitors = [];

    var registerVisitor = function (visitor) {
        visitors.push(visitor);
    }

    var notifyAll = function() {
        for (var index = 0; index < visitors.length; ++index)
            visitors[index].visit();
    }

    var myData = ["some", "list", "of", "data"];

    var setData = function (newData) {
        myData = newData;
        notifyAll();
    }

    var getData = function () {
        return myData;
    }

    return {
        registerVisitor: registerVisitor,
        setData: setData,
        getData: getData
    };
}

myApp.controller('firstController', ['$scope', 'myService',
    function firstController($scope, myService) {

        var setData = function (data) {
            myService.setData(data);
        }

    }
]);

myApp.controller('secondController', ['$scope', 'myService',
    function secondController($scope, myService) {

        myService.registerVisitor(this);

        this.visit = function () {
            $scope.data = myService.getData();
        }

        $scope.data = myService.getData();
    }
]);

In questo modo semplice, un controller può aggiornare un altro controller che alcuni dati sono stati aggiornati.

Ho creato una fabbrica che controlla l'ambito condiviso tra il modello del percorso, in modo da poter mantenere i dati condivisi proprio quando gli utenti navigano nello stesso percorso principale del percorso.

.controller('CadastroController', ['$scope', 'RouteSharedScope',
    function($scope, routeSharedScope) {
      var customerScope = routeSharedScope.scopeFor('/Customer');
      //var indexScope = routeSharedScope.scopeFor('/');
    }
 ])

Pertanto, se l'utente passa a un altro percorso, ad esempio "/ Supporto", i dati condivisi per il percorso "/ Cliente" verranno automaticamente distrutti. Tuttavia, se invece l'utente passa a percorsi "secondari", come "/ Cliente / 1" o "/ Cliente / elenco", l'ambito non verrà distrutto.

Puoi vedere un esempio qui: http://plnkr.co/edit/OL8of9

1

using $localStorage

app.controller('ProductController', function($scope, $localStorage) {
    $scope.setSelectedProduct = function(selectedObj){
        $localStorage.selectedObj= selectedObj;
    };
});

app.controller('CartController', function($scope,$localStorage) { 
    $scope.selectedProducts = $localStorage.selectedObj;
    $localStorage.$reset();//to remove
});

2

Al clic puoi chiamare il metodo che invoca la trasmissione:

$rootScope.$broadcast('SOME_TAG', 'your value');

and the second controller will listen on this tag like:
$scope.$on('SOME_TAG', function(response) {
      // ....
})

3

using $rootScope:

4

window.sessionStorage.setItem("Mydata",data);
$scope.data = $window.sessionStorage.getItem("Mydata");

5

Un modo usando il servizio angolare:

var app = angular.module("home", []);

app.controller('one', function($scope, ser1){
$scope.inputText = ser1;
});

app.controller('two',function($scope, ser1){
$scope.inputTextTwo = ser1;
});

app.factory('ser1', function(){
return {o: ''};
});

Crea una fabbrica nel tuo modulo e aggiungi un riferimento della fabbrica nel controller e usa le sue variabili nel controller e ora ottieni il valore dei dati in un altro controller aggiungendo riferimento dove vuoi

Non so se sarà di aiuto a nessuno, ma sulla base della risposta Charx (grazie!) Ho creato un servizio cache semplice. Sentiti libero di usare, remixare e condividere:

angular.service('cache', function() {
    var _cache, _store, _get, _set, _clear;
    _cache = {};

    _store = function(data) {
        angular.merge(_cache, data);
    };

    _set = function(data) {
        _cache = angular.extend({}, data);
    };

    _get = function(key) {
        if(key == null) {
            return _cache;
        } else {
            return _cache[key];
        }
    };

    _clear = function() {
        _cache = {};
    };

    return {
        get: _get,
        set: _set,
        store: _store,
        clear: _clear
    };
});

Un modo usando il servizio angolare:

var app = angular.module("home", []);

app.controller('one', function($scope, ser1){
$scope.inputText = ser1;
});


app.controller('two',function($scope, ser1){
$scope.inputTextTwo = ser1;
});

app.factory('ser1', function(){
return {o: ''};
});



<div ng-app='home'>

<div ng-controller='one'>
  Type in text: 
  <input type='text' ng-model="inputText.o"/>
</div>
<br />

<div ng-controller='two'>
  Type in text:
  <input type='text' ng-model="inputTextTwo.o"/>
</div>

</div>

https://jsfiddle.net/1w64222q/

FYI L'oggetto $ scope ha $ emit, $ broadcast, $ on AND L'oggetto $ rootScope ha lo stesso $ emit, $ broadcast, $ on

leggi di più sul modello di progettazione di pubblicazione / abbonamento in angolare qui

Per migliorare la soluzione proposta da @Maxim utilizzando $ broadcast, l'invio dei dati non cambia

$rootScope.$broadcast('SOME_TAG', 'my variable');

ma ai dati di ascolto

$scope.$on('SOME_TAG', function(event, args) {
    console.log("My variable is", args);// args is value of your variable
})

Ci sono tre modi per farlo,

a) utilizzo di un servizio

b) Sfruttare la relazione padre / figlio dipendente tra gli ambiti del controller.

c) In Angular 2.0 la parola chiave "As" passerà i dati da un controller all'altro.

Per ulteriori informazioni con l'esempio, controlla il link seguente:

http://www.tutespace.com/2016/03/angular-js.html

var custApp = angular.module("custApp", [])
.controller('FirstController', FirstController)
.controller('SecondController',SecondController)
.service('sharedData', SharedData);

FirstController.$inject = ['sharedData'];
function FirstController(sharedData) {
this.data = sharedData.data;
}

SecondController.$inject['sharedData'];
function SecondController(sharedData) {
this.data = sharedData.data;
}

function SharedData() {
this.data = {
    value: 'default Value'
}
}

Primo controller

<div ng-controller="FirstController as vm">
<input type=text ng-model="vm.data.value" />
</div>

Secondo controller

 <div ng-controller="SecondController as vm">
    Second Controller<br>
    {{vm.data.value}}
</div>

Penso che la

miglior modo

app.controller('ProductController', function($scope, $localStorage) {
    $scope.setSelectedProduct = function(selectedObj){
        $localStorage.selectedObj= selectedObj;
    };
});

Lo sarà il tuo CardController

app.controller('CartController', function($scope,$localStorage) { 
    $scope.selectedProducts = $localStorage.selectedObj;
    $localStorage.$reset();//to remove
});

Puoi anche aggiungere

if($localStorage.selectedObj){
    $scope.selectedProducts = $localStorage.selectedObj;
}else{
    //redirect to select product using $location.url('/select-product')
}