Passando dados entre controladores em Angular JS?

Eu tenho um controlador básico que exibe meus produtos,

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

Na minha opinião, estou exibindo esses produtos em uma lista

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

O que estou tentando fazer é que, quando alguém clica no nome do produto, tenho outra exibição chamada carrinho, onde esse produto é adicionado.

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

Então, minha dúvida aqui é: como passar esses produtos clicados do primeiro controlador para o segundo? Eu assumi que o carrinho deveria ser um controlador também.

Eu trato de evento de clique usando diretiva. Também sinto que eu deveria estar usando o serviço para alcançar a funcionalidade acima apenas não consigo descobrir como? porque o carrinho terá um número predefinido de produtos adicionados, pode ser 5/10, dependendo de qual usuário da página é. Então, eu gostaria de manter este genérico.

Atualizar:

Eu criei um serviço para transmitir e no segundo controlador eu o recebo. Agora a consulta é como atualizo o dom? Desde a minha lista para soltar o produto é bastante codificado.

A partir da descrição, parece que você deveria estar usando um serviço. Confira http://egghead.io/lessons/angularjs-sharing-data-between-controllers e o serviço AngularJS passando dados entre controladores para ver alguns exemplos.

Você pode definir o serviço do produto (como uma fábrica) como tal:

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

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

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

  return {
    addProduct: addProduct,
    getProducts: getProducts
  };

});

A dependência injeta o serviço nos dois controladores.

No seu ProductController, defina alguma ação que adicione o objeto selecionado à matriz:

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

No seu CartController, obtenha os produtos do serviço:

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

como passar esses produtos clicados do primeiro controlador para o segundo?

Ao clicar, você pode chamar o método que chama a transmissão :

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

e o segundo controlador ouvirá essa tag como:

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

Como não podemos injetar $ scope em serviços, não há nada como um singleton $ scope.

Mas nós podemos injetar $rootScope. Portanto, se você armazenar valor no Serviço, poderá executar $rootScope.$broadcast('SOME_TAG', 'your value');no corpo do Serviço. (Consulte a descrição @Charx sobre serviços)

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

Por favor, verifique um bom artigo sobre $ broadcast , $ emit

Solução sem criar Serviço, usando $ rootScope:

Para compartilhar propriedades entre os Controladores de aplicativos, você pode usar Angular $ rootScope. Essa é outra opção para compartilhar dados, colocando-os para que as pessoas saibam sobre eles.

A maneira preferida de compartilhar alguma funcionalidade entre os Controladores é Serviços, para ler ou alterar uma propriedade global, você pode usar $ 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 em um modelo (acesse as propriedades com $ root):

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

Você pode fazer isso por dois métodos.

1. Ao usar $rootscope, mas não recomendo isso. O $rootScopeé o escopo mais alto. Um aplicativo pode ter apenas um $rootScopeque será compartilhado entre todos os componentes de um aplicativo. Portanto, ele atua como uma variável global.

2. Usando serviços. Você pode fazer isso compartilhando um serviço entre dois controladores. O código de serviço pode ser assim:

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

   Você pode ver meu violino aqui .

Uma maneira ainda mais simples de compartilhar os dados entre controladores é usar estruturas de dados aninhadas. Em vez de, por exemplo

$scope.customer = {};

podemos usar

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

A datapropriedade será herdada do escopo pai, para que possamos sobrescrever seus campos, mantendo o acesso de outros controladores.

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

podemos armazenar dados em sessão e usá-los em qualquer lugar do programa.

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

Outro lugar

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

Eu vi as respostas aqui e ele está respondendo à questão do compartilhamento de dados entre controladores, mas o que devo fazer se quiser que um controlador notifique o outro sobre o fato de que os dados foram alterados (sem usar a transmissão)? FÁCIL! Apenas usando o famoso padrão de visitante:

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();
    }
]);

Dessa maneira simples, um controlador pode atualizar outro controlador que alguns dados foram atualizados.

Criei uma fábrica que controla o escopo compartilhado entre o padrão do caminho da rota, para que você possa manter os dados compartilhados apenas quando os usuários estiverem navegando no mesmo caminho pai da rota.

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

Portanto, se o usuário for para outro caminho de rota, por exemplo '/ Support', os dados compartilhados para o caminho '/ Customer' serão automaticamente destruídos. Mas se, em vez disso, o usuário seguir para caminhos 'filho', como '/ Customer / 1' ou '/ Customer / list', o escopo não será destruído.

Você pode ver uma amostra aqui: 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

Ao clicar, você pode chamar o método que chama a transmissão:

$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

Uma maneira de usar o serviço angular:

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: ''};
});

Faça uma fábrica no seu módulo e adicione uma referência da fábrica no controlador e use suas variáveis ​​no controlador e agora obtenha o valor dos dados em outro controlador adicionando referência onde quer que você queira

Não sei se isso ajudará alguém, mas com base na resposta do Charx (obrigado!), Criei um serviço de cache simples. Sinta-se livre para usar, remixar e compartilhar:

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
    };
});

Uma maneira de usar o serviço angular:

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/

Para sua informação, o objeto $ scope tem o $ emit, $ broadcast, $ on E o objeto $ rootScope possui o idêntico $ emit, $ broadcast, $ on

leia mais sobre o padrão de design de publicação / assinatura em angular aqui

Para melhorar a solução proposta pelo @Maxim usando $ broadcast, envie os dados não mudam

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

mas ouvindo dados

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

Existem três maneiras de fazer isso,

a) usando um serviço

b) Explorar a relação pai / filho dependente entre os escopos do controlador.

c) No Angular 2.0, a palavra-chave "As" passará os dados de um controlador para outro.

Para mais informações, por exemplo, verifique o link abaixo:

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'
}
}

Primeiro Controlador

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

Segundo Controlador

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

Eu acho que o

melhor maneira

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

O seu controlador de cartão será

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

Você também pode adicionar

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