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

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

À mon avis, j'affiche 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 clique sur le nom du produit, j'ai une autre vue nommée 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 est, comment faire passer ces produits cliqués du premier contrôleur au second? J'ai supposé que le chariot devrait également être un contrôleur.

Je gère l'événement click en utilisant la directive. De plus, je pense que je devrais utiliser le service pour atteindre les fonctionnalités ci-dessus, je ne sais pas comment? parce que le panier sera prédéfini, le nombre de produits ajoutés pourrait être de 5/10 en fonction de l'utilisateur de la page. Je voudrais donc garder ce générique.

Mettre à jour:

J'ai créé un service pour diffuser et dans le deuxième contrôleur je le reçois. Maintenant, la question est de savoir comment mettre à jour dom? Étant donné que ma liste de produits à déposer est assez codée en dur.

D'après la description, il semble que vous devriez utiliser un service. Consultez http://egghead.io/lessons/angularjs-sharing-data-between-controllers et AngularJS Service Passing Data Between Controllers pour voir quelques exemples.

Vous pouvez définir votre service produit (en tant qu'usine) comme tel:

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

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

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

  return {
    addProduct: addProduct,
    getProducts: getProducts
  };

});

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

Dans votre ProductController, définissez une action qui ajoute l'objet sélectionné au tableau:

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

Dans votre CartController, obtenez les produits du service:

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

comment passer ces produits cliqués du premier contrôleur au second?

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

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

et le deuxième contrôleur écoutera sur cette balise comme:

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

Comme nous ne pouvons pas injecter $ scope dans les services, rien de tel qu'un $ singleton scope.

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

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

Veuillez consulter un bon article sur $ broadcast , $ emit

Solution sans créer de service, en utilisant $ rootScope:

Pour partager des propriétés entre les contrôleurs d'application, vous pouvez utiliser Angular $ rootScope. Il s'agit d'une autre option pour partager des données, en les mettant à la disposition des utilisateurs.

Les services préférés pour partager certaines fonctionnalités entre les contrôleurs sont les services, pour lire ou 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;
}]);

Utilisation de $ rootScope dans un modèle (Accéder aux propriétés avec $ root):

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

Vous pouvez le faire par deux méthodes.

1. En utilisant $rootscope, mais je ne le recommande pas. C'est $rootScopela portée la plus élevée. Une application ne peut en avoir qu'une $rootScopequi sera partagée entre tous les composants d'une application. Il agit donc comme une variable globale.

2. Utiliser des services. Vous pouvez le faire en partageant un service entre deux contrôleurs. Le code de service peut ressembler à ceci:

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

   Vous pouvez voir mon violon ici .

Un moyen encore plus simple de partager les données entre les contrôleurs consiste à utiliser des structures de données imbriquées. Au lieu de, par exemple

$scope.customer = {};

on peut utiliser

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

La datapropriété sera héritée de la portée parent afin que nous puissions remplacer ses champs, en gardant l'accès aux autres contrôleurs.

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

nous pouvons stocker des données en session et les utiliser n'importe où dans notre programme.

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

Autre endroit

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

J'ai vu les réponses ici, et cela répond à la question du partage des données entre les contrôleurs, mais que dois-je faire si je veux qu'un contrôleur informe l'autre du fait que les données ont été modifiées (sans utiliser la diffusion)? FACILE! En utilisant simplement le célèbre modèle de visiteur:

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

De cette manière simple, un contrôleur peut mettre à jour un autre contrôleur que certaines données ont été mises à jour.

J'ai créé une fabrique qui contrôle la portée partagée entre le modèle du chemin de l'itinéraire, afin que vous puissiez conserver les données partagées juste lorsque les utilisateurs naviguent dans le même chemin parent de l'itinéraire.

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

Ainsi, si l'utilisateur accède à un autre chemin de l'itinéraire, par exemple «/ Support», les données partagées pour le chemin «/ Client» seront automatiquement détruites. Mais, si au lieu de cela, l'utilisateur va sur les chemins «enfants», comme «/ Customer / 1» ou «/ Customer / list», la portée ne sera pas détruite.

Vous pouvez voir un exemple ici: 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

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

$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

Une façon d'utiliser le service angulaire:

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

Créez une usine dans votre module et ajoutez une référence de l'usine dans le contrôleur et utilisez ses variables dans le contrôleur et obtenez maintenant la valeur des données dans un autre contrôleur en ajoutant une référence où vous le souhaitez

Je ne sais pas si cela aidera quelqu'un, mais sur la base de la réponse de Charx (merci!), J'ai créé un service de cache simple. N'hésitez pas à utiliser, remixer et partager:

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

Une façon d'utiliser le service angulaire:

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'objet $ scope a le $ emit, $ broadcast, $ on ET l'objet $ rootScope a le $ emit, $ broadcast, $ on identique

en savoir plus sur le modèle de conception de publication / abonnement en angulaire ici

Pour améliorer la solution proposée par @Maxim en utilisant $ broadcast, envoyer des données ne change pas

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

mais aux données d'écoute

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

Il y a trois façons de le faire,

a) utiliser un service

b) Exploiter la relation parent / enfant dépendante entre les portées du contrôleur.

c) Dans Angular 2.0, le mot clé "As" transmettra les données d'un contrôleur à un autre.

Pour plus d'informations avec exemple, veuillez vérifier le lien ci-dessous:

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

Premier contrôleur

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

Deuxième contrôleur

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

Je pense que le

meilleur moyen

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

Votre cardController sera

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

Vous pouvez également ajouter

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