Angulaire : Partager des données entre les contrôleurs de

Question

Je suis en train de partager des données entre les contrôleurs. Cas d’utilisation est une forme de plusieurs étape, les données saisies dans une seule entrée sont plus tard utilisées dans de multiples endroits d’affichage extérieur le contrôleur d’origine. Le code ci-dessous et en jsfiddle ici.

HTML

JS

Toute aide est grandement appréciée.

Answer 1

Une solution simple est d'avoir votre usine de retour d'un objet et laissez vos contrôleurs de travailler avec une référence au même objet:

JS:

myApp.factory('Data', function () {
    return { FirstName: '' };
});

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

myApp.controller('SecondCtrl', function ($scope, Data) {
    $scope.Data = 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>

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

Lorsque les applications sont de plus en plus, plus complexe et plus difficile à tester, vous ne voulez pas vous exposer l'ensemble de l'objet de l'usine, de cette manière, mais au lieu de donner un accès limité, par exemple via des accesseurs et mutateurs:

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

    var data = {
        FirstName: ''
    };

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

Avec cette approche, il est jusqu'à la consommation des contrôleurs de mise à jour de l'usine avec de nouvelles valeurs, et à l'affût de changements pour les obtenir:

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

    $scope.firstName = '';

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

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

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

Démo: http://jsfiddle.net/5LL3U/2/

Answer 2

Je préfère ne pas utiliser `` pour cela. Au lieu d’affecter l’ensemble de la fonction à portée d’un contrôleur, vous pouvez affecter uniquement les données.

JS :

HTML :

Alternativement, vous pouvez actualiser les données de service avec une méthode directe.

JS :

Answer 3

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