Partager des données entre les contrôleurs AngularJS

J'essaie de partager des données entre les contrôleurs. Le cas d'utilisation est un formulaire en plusieurs étapes, les données entrées dans une entrée sont ensuite utilisées dans plusieurs emplacements d'affichage en dehors du contrôleur d'origine. Code ci-dessous et dans jsfiddle ici .

HTML

<div ng-controller="FirstCtrl">
    <input type="text" ng-model="FirstName"><!-- Input entered here -->
    <br>Input is : <strong>{{FirstName}}</strong><!-- Successfully updates here -->
</div>

<hr>

<div ng-controller="SecondCtrl">
    Input should also be here: {{FirstName}}<!-- How do I automatically updated it here? -->
</div>

JS

// declare the app with no dependencies
var myApp = angular.module('myApp', []);

// make a factory to share data between controllers
myApp.factory('Data', function(){
    // I know this doesn't work, but what will?
    var FirstName = '';
    return FirstName;
});

// Step 1 Controller
myApp.controller('FirstCtrl', function( $scope, Data ){

});

// Step 2 Controller
myApp.controller('SecondCtrl', function( $scope, Data ){
    $scope.FirstName = Data.FirstName;
});

Toute aide est grandement appréciée.

Une solution simple est que votre usine retourne un objet et que vos contrôleurs fonctionnent avec une référence au même objet:

JS:

// declare the app with no dependencies
var myApp = angular.module('myApp', []);

// Create the factory that share the Fact
myApp.factory('Fact', function(){
  return { Field: '' };
});

// Two controllers sharing an object that has a string in it
myApp.controller('FirstCtrl', function( $scope, Fact ){
  $scope.Alpha = Fact;
});

myApp.controller('SecondCtrl', function( $scope, Fact ){
  $scope.Beta = Fact;
});

HTML:

<div ng-controller="FirstCtrl">
    <input type="text" ng-model="Alpha.Field">
    First {{Alpha.Field}}
</div>

<div ng-controller="SecondCtrl">
<input type="text" ng-model="Beta.Field">
    Second {{Beta.Field}}
</div>

Démo: http://jsfiddle.net/HEdJF/

Lorsque les applications deviennent plus grandes, plus complexes et plus difficiles à tester, vous ne souhaiterez peut-être pas exposer l'objet entier de l'usine de cette façon, mais accordez plutôt un accès limité, par exemple via des getters et des setters:

myApp.factory('Data', function () {

    var data = {
        FirstName: ''
    };

    return {
        getFirstName: function () {
            return data.FirstName;
        },
        setFirstName: function (firstName) {
            data.FirstName = firstName;
        }
    };
});

Avec cette approche, il appartient aux contrôleurs consommateurs de mettre à jour l'usine avec de nouvelles valeurs et de surveiller les changements pour les obtenir:

myApp.controller('FirstCtrl', function ($scope, Data) {

    $scope.firstName = '';

    $scope.$watch('firstName', function (newValue, oldValue) {
        if (newValue !== oldValue) Data.setFirstName(newValue);
    });
});

myApp.controller('SecondCtrl', function ($scope, Data) {

    $scope.$watch(function () { return Data.getFirstName(); }, function (newValue, oldValue) {
        if (newValue !== oldValue) $scope.firstName = newValue;
    });
});

HTML:

<div ng-controller="FirstCtrl">
  <input type="text" ng-model="firstName">
  <br>Input is : <strong>{{firstName}}</strong>
</div>
<hr>
<div ng-controller="SecondCtrl">
  Input should also be here: {{firstName}}
</div>

Démo: http://jsfiddle.net/27mk1n1o/

Je préfère ne pas l'utiliser $watchpour cela. Au lieu d'affecter l'intégralité du service à l'étendue d'un contrôleur, vous pouvez affecter uniquement les données.

JS:

var myApp = angular.module('myApp', []);

myApp.factory('MyService', function(){
  return {
    data: {
      firstName: '',
      lastName: ''
    }
    // Other methods or objects can go here
  };
});

myApp.controller('FirstCtrl', function($scope, MyService){
  $scope.data = MyService.data;
});

myApp.controller('SecondCtrl', function($scope, MyService){
   $scope.data = MyService.data;
});

HTML:

<div ng-controller="FirstCtrl">
  <input type="text" ng-model="data.firstName">
  <br>Input is : <strong>{{data.firstName}}</strong>
</div>
<hr>
<div ng-controller="SecondCtrl">
  Input should also be here: {{data.firstName}}
</div>

Vous pouvez également mettre à jour les données de service avec une méthode directe.

JS:

// A new factory with an update method
myApp.factory('MyService', function(){
  return {
    data: {
      firstName: '',
      lastName: ''
    },
    update: function(first, last) {
      // Improve this method as needed
      this.data.firstName = first;
      this.data.lastName = last;
    }
  };
});

// Your controller can use the service's update method
myApp.controller('SecondCtrl', function($scope, MyService){
   $scope.data = MyService.data;

   $scope.updateData = function(first, last) {
     MyService.update(first, last);
   }
});

Il existe de nombreuses façons de partager les données entre les contrôleurs

1. utiliser des services
2. en utilisant les services $ state.go
3. en utilisant des Stateparams
4. en utilisant rootscope

Explication de chaque méthode:

1. Je ne vais pas expliquer comme c'est déjà expliqué par quelqu'un

2. en utilisant $state.go

     $state.go('book.name', {Name: 'XYZ'}); 
   
     // then get parameter out of URL
     $state.params.Name;
   

3. $stateparamfonctionne de la même manière que $state.go, vous le transmettez en tant qu'objet du contrôleur émetteur et le récupérez dans le contrôleur récepteur à l'aide de stateparam

4. en utilisant $rootscope

   (a) envoyer des données de l'enfant au contrôleur parent

     $scope.Save(Obj,function(data) {
         $scope.$emit('savedata',data); 
         //pass the data as the second parameter
     });
   
     $scope.$on('savedata',function(event,data) {
         //receive the data as second parameter
     }); 
   

   (b) envoyer des données du parent au contrôleur enfant

     $scope.SaveDB(Obj,function(data){
         $scope.$broadcast('savedata',data);
     });
   
     $scope.SaveDB(Obj,function(data){`enter code here`
         $rootScope.$broadcast('saveCallback',data);
     });
   

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 "/ Client / 1" ou "/ Client / liste", la portée ne sera pas détruite.

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

Il existe plusieurs façons de partager des données entre les contrôleurs

• Services angulaires
• $ broadcast, $ emit, méthode
• Communication du contrôleur parent à enfant
• $ rootscope

Comme nous le savons, ce $rootscopen'est pas un moyen préférable pour le transfert de données ou la communication car c'est une portée mondiale qui est disponible pour toute l'application

Pour le partage de données entre les contrôleurs Angular Js, les services angulaires sont les meilleures pratiques, par exemple. .factory, .service
Pour référence

En cas de transfert de données du parent au contrôleur de l' enfant , vous pouvez données parent directement accès au contrôleur de l' enfant par le biais $scope
Si vous utilisez , ui-routervous pouvez ensuite utiliser $stateParmaspour passer des paramètres d'URL comme id, name, key, etc.

$broadcastest également un bon moyen de transférer des données entre les contrôleurs du parent vers l'enfant et $emitde transférer les données de l'enfant vers les contrôleurs parent

HTML

<div ng-controller="FirstCtrl">
   <input type="text" ng-model="FirstName">
   <br>Input is : <strong>{{FirstName}}</strong>
</div>

<hr>

<div ng-controller="SecondCtrl">
   Input should also be here: {{FirstName}}
</div>

JS

myApp.controller('FirstCtrl', function( $rootScope, Data ){
    $rootScope.$broadcast('myData', {'FirstName': 'Peter'})
});

myApp.controller('SecondCtrl', function( $rootScope, Data ){
    $rootScope.$on('myData', function(event, data) {
       $scope.FirstName = data;
       console.log(data); // Check in console how data is coming
    });
});

Référez-vous au lien donné pour en savoir plus sur$broadcast

Solution la plus simple:

J'ai utilisé un service AngularJS .

Étape 1: J'ai créé un service AngularJS nommé SharedDataService.

myApp.service('SharedDataService', function () {
     var Person = {
        name: ''

    };
    return Person;
});

Étape 2: créez deux contrôleurs et utilisez le service créé ci-dessus.

//First Controller
myApp.controller("FirstCtrl", ['$scope', 'SharedDataService',
   function ($scope, SharedDataService) {
   $scope.Person = SharedDataService;
   }]);

//Second Controller
myApp.controller("SecondCtrl", ['$scope', 'SharedDataService',
   function ($scope, SharedDataService) {
   $scope.Person = SharedDataService;
   }]);

Étape 3: utilisez simplement les contrôleurs créés dans la vue.

<body ng-app="myApp">

<div ng-controller="FirstCtrl">
<input type="text" ng-model="Person.name">
<br>Input is : <strong>{{Person.name}}</strong>
</div>

<hr>

<div ng-controller="SecondCtrl">
Input should also be here: {{Person.name}}
</div>

</body>

Pour voir la solution de travail à ce problème, veuillez cliquer sur le lien ci-dessous

https://codepen.io/wins/pen/bmoYLr

Fichier .html:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body ng-app="myApp">

  <div ng-controller="FirstCtrl">
    <input type="text" ng-model="Person.name">
    <br>Input is : <strong>{{Person.name}}</strong>
   </div>

<hr>

  <div ng-controller="SecondCtrl">
    Input should also be here: {{Person.name}}
  </div>

//Script starts from here

<script>

var myApp = angular.module("myApp",[]);
//create SharedDataService
myApp.service('SharedDataService', function () {
     var Person = {
        name: ''

    };
    return Person;
});

//First Controller
myApp.controller("FirstCtrl", ['$scope', 'SharedDataService',
    function ($scope, SharedDataService) {
    $scope.Person = SharedDataService;
    }]);

//Second Controller
myApp.controller("SecondCtrl", ['$scope', 'SharedDataService',
    function ($scope, SharedDataService) {
    $scope.Person = SharedDataService;
}]);

</script>


</body>
</html>

Il y a une autre façon sans utiliser $ watch, en utilisant angular.copy:

var myApp = angular.module('myApp', []);

myApp.factory('Data', function(){

    var service = {
        FirstName: '',
        setFirstName: function(name) {
            // this is the trick to sync the data
            // so no need for a $watch function
            // call this from anywhere when you need to update FirstName
            angular.copy(name, service.FirstName); 
        }
    };
    return service;
});


// Step 1 Controller
myApp.controller('FirstCtrl', function( $scope, Data ){

});

// Step 2 Controller
myApp.controller('SecondCtrl', function( $scope, Data ){
    $scope.FirstName = Data.FirstName;
});

Il existe plusieurs façons de procéder.

1. Événements - déjà bien expliqué.

2. routeur ui - expliqué ci-dessus.

3. Service - avec la méthode de mise à jour affichée ci-dessus
4. MAUVAIS - Surveiller les changements.
5. Une autre approche parent-enfant plutôt que d' émettre et de diffuser -

*

<superhero flight speed strength> Superman is here! </superhero>
<superhero speed> Flash is here! </superhero>

*

app.directive('superhero', function(){
    return {
        restrict: 'E',
        scope:{}, // IMPORTANT - to make the scope isolated else we will pollute it in case of a multiple components.
        controller: function($scope){
            $scope.abilities = [];
            this.addStrength = function(){
                $scope.abilities.push("strength");
            }
            this.addSpeed = function(){
                $scope.abilities.push("speed");
            }
            this.addFlight = function(){
                $scope.abilities.push("flight");
            }
        },
        link: function(scope, element, attrs){
            element.addClass('button');
            element.on('mouseenter', function(){
               console.log(scope.abilities);
            })
        }
    }
});
app.directive('strength', function(){
    return{
        require:'superhero',
        link: function(scope, element, attrs, superHeroCtrl){
            superHeroCtrl.addStrength();
        }
    }
});
app.directive('speed', function(){
    return{
        require:'superhero',
        link: function(scope, element, attrs, superHeroCtrl){
            superHeroCtrl.addSpeed();
        }
    }
});
app.directive('flight', function(){
    return{
        require:'superhero',
        link: function(scope, element, attrs, superHeroCtrl){
            superHeroCtrl.addFlight();
        }
    }
});

Je ne sais pas où j'ai choisi ce modèle, mais pour le partage de données entre les contrôleurs et la réduction de $ rootScope et $ scope, cela fonctionne très bien. Cela rappelle une réplication de données où vous avez des éditeurs et des abonnés. J'espère que cela aide.

Le service:

(function(app) {
    "use strict";
    app.factory("sharedDataEventHub", sharedDataEventHub);

    sharedDataEventHub.$inject = ["$rootScope"];

    function sharedDataEventHub($rootScope) {
        var DATA_CHANGE = "DATA_CHANGE_EVENT";
        var service = {
            changeData: changeData,
            onChangeData: onChangeData
        };
        return service;

        function changeData(obj) {
            $rootScope.$broadcast(DATA_CHANGE, obj);
        }

        function onChangeData($scope, handler) {
            $scope.$on(DATA_CHANGE, function(event, obj) {
                handler(obj);
            });
        }
    }
}(app));

Le contrôleur qui obtient les nouvelles données, c'est-à-dire l'éditeur ferait quelque chose comme ça.

var someData = yourDataService.getSomeData();

sharedDataEventHub.changeData(someData);

Le contrôleur qui utilise également ces nouvelles données, appelé l'abonné, ferait quelque chose comme ça ...

sharedDataEventHub.onChangeData($scope, function(data) {
    vm.localData.Property1 = data.Property1;
    vm.localData.Property2 = data.Property2;
});

Cela fonctionnera pour n'importe quel scénario. Ainsi, lorsque le contrôleur principal est initialisé et obtient des données, il appelle la méthode changeData qui la diffuse ensuite à tous les abonnés de ces données. Cela réduit le couplage de nos contrôleurs entre eux.

Faites-le simplement (testé avec la v1.3.15):

<article ng-controller="ctrl1 as c1">
    <label>Change name here:</label>
    <input ng-model="c1.sData.name" />
    <h1>Control 1: {{c1.sData.name}}, {{c1.sData.age}}</h1>
</article>
<article ng-controller="ctrl2 as c2">
    <label>Change age here:</label>
    <input ng-model="c2.sData.age" />
    <h1>Control 2: {{c2.sData.name}}, {{c2.sData.age}}</h1>
</article>

<script>
    var app = angular.module("MyApp", []);

    var dummy = {name: "Joe", age: 25};

    app.controller("ctrl1", function () {
        this.sData = dummy;
    });

    app.controller("ctrl2", function () {
        this.sData = dummy;
    });
</script>