Passer des données entre contrôleurs dans JS angulaire?

Question

J'ai un contrôleur de base qui affiche mes produits,

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

De mon point de vue je suis d'affichage de ces produits dans une liste

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

Ce que j'essaie de faire, c'est quand quelqu'un clic sur le nom du produit, j'ai un autre point de vue panier où ce produit est ajouté.

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

Donc mon doute, ici, c'est comment faire passer ce cliqué sur des produits de premier contrôleur de seconde? je suppose que le chariot doit être un contrôleur de trop.

J'ai poignée cliquez sur l'événement à l'aide de la directive. Aussi je pense que je devrais être à l'aide de service à atteindre au-dessus de la fonctionnalité ne peuvent tout simplement pas comprendre comment le faire? parce chariot nombre prédéfini de produits à valeur ajoutée pourrait être 5/10 selon la page de l'utilisateur. Donc, je tiens à garder ce générique.

Mise à jour:

J'ai créé un service de diffusion et dans la deuxième manette, je la reçois. Maintenant, la requête est de savoir comment dois-je mettre à jour dom? Depuis ma liste de chute est assez codé en dur.

Answer 1

À partir de la description, il semble que si vous pourriez être l'aide d'un service. Découvrez http://egghead.io/lessons/angularjs-sharing-data-between-controllers et AngularJS Service de la transmission des Données Entre les Contrôleurs pour voir quelques exemples.

Vous pouvez définir votre produit service en tant que tel:

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

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

  var getProducts = function(){
      return productList;
  }

  return {
    addProduct: addProduct,
    getProducts: getProducts
  };

});

La dépendance injecter le service dans les deux contrôleurs.

Dans votre ProductController, de définir une action qui ajoute de l'objet sélectionné dans le tableau:

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

Dans votre CartController, de prendre les produits de la prestation:

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

Answer 2

comment faire passer cette cliqué sur des produits de premier contrôleur de seconde?

Sur clic, vous pouvez appeler la méthode qui appelle de diffusion:

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

et le deuxième contrôleur sera à l'écoute sur ce tag:

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

Puisque nous ne pouvons pas injecter $champ d'application dans les services, il n'y a rien comme un singleton $champ d'application.

Mais nous pouvons injecter $rootScope. Donc, si vous stocker la valeur dans le Service, vous pouvez exécuter $rootScope.$broadcast('SOME_TAG', 'your value'); dans le Service du corps. (Voir @Charx description de services)

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

Answer 3

Solution sans créer de Services, à l'aide de $rootScope:

Partager propriétés à travers l'application des Contrôleurs, vous pouvez utiliser Angulaire $rootScope. Ceci est une autre option pour partager des données, en mettant en sorte que les gens savent à ce sujet.

La meilleure façon de partager certaines des fonctionnalités entre les Contrôleurs de Services, de lire ou de modifier une propriété globale, vous pouvez utiliser $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;
}]);

À l'aide de $rootScope dans un modèle (propriétés d'Accès avec $root):

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

Answer 4

Un moyen encore plus simple pour partager les données entre les contrôleurs d’utilise des structures de données imbriqués. Au lieu, par exemple

Nous pouvons utiliser

Le `` propriété est héritée d’étendue parente donc nous pouvons écraser ses champs, empêche l’accès d’autres contrôleurs.

Answer 5

J'ai créé une usine qui contrôle l'étendue partagée entre route chemin du motif, de sorte que vous pouvez conserver les données partagées seulement lorsque les utilisateurs naviguent dans la même route, chemin parent.

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

Donc, si l'utilisateur passe à une autre voie de chemin d'accès, par exemple '/Support', les données partagées pour le chemin '/' du Client sera automatiquement détruit. Mais, si au lieu de cela, l'utilisateur va 'enfant' chemins, comme '/Client/1 " ou " /Client/liste de la de la portée ne sera pas détruit.

Vous pouvez voir un exemple ici: http://plnkr.co/edit/OL8of9