AngularJS: Comment passer des variables entre contrôleurs?

J'ai deux contrôleurs angulaires:

function Ctrl1($scope) {
    $scope.prop1 = "First";
}

function Ctrl2($scope) {
    $scope.prop2 = "Second";
    $scope.both = Ctrl1.prop1 + $scope.prop2; //This is what I would like to do ideally
}

Je ne peux pas l'utiliser à l' Ctrl1intérieur Ctrl2car il n'est pas défini. Mais si j'essaye de le passer comme ça…

function Ctrl2($scope, Ctrl1) {
    $scope.prop2 = "Second";
    $scope.both = Ctrl1.prop1 + $scope.prop2; //This is what I would like to do ideally
}

J'ai une erreur. Est-ce que quelqu'un sait comment faire ça?

Faire

Ctrl2.prototype = new Ctrl1();

Échoue également.

REMARQUE: ces contrôleurs ne sont pas imbriqués les uns dans les autres.

Une façon de partager des variables entre plusieurs contrôleurs consiste à créer un service et à l'injecter dans n'importe quel contrôleur où vous souhaitez l'utiliser.

Exemple de service simple:

angular.module('myApp', [])
    .service('sharedProperties', function () {
        var property = 'First';

        return {
            getProperty: function () {
                return property;
            },
            setProperty: function(value) {
                property = value;
            }
        };
    });

Utilisation du service dans un contrôleur:

function Ctrl2($scope, sharedProperties) {
    $scope.prop2 = "Second";
    $scope.both = sharedProperties.getProperty() + $scope.prop2;
}

Ceci est très bien décrit dans ce blog (Leçon 2 et plus en particulier).

J'ai trouvé que si vous souhaitez vous lier à ces propriétés sur plusieurs contrôleurs, cela fonctionne mieux si vous vous liez à la propriété d'un objet au lieu d'un type primitif (booléen, chaîne, nombre) pour conserver la référence liée.

Exemple: var property = { Property1: 'First' };au lieu de var property = 'First';.

MISE À JOUR: Pour (espérons-le) clarifier les choses, voici un violon qui montre un exemple de:

• Liaison à des copies statiques de la valeur partagée (dans myController1)
  • Liaison à une primitive (chaîne)
  • Liaison à la propriété d'un objet (enregistrée dans une variable de portée)
• Liaison aux valeurs partagées qui mettent à jour l'interface utilisateur à mesure que les valeurs sont mises à jour (dans myController2)
  • Liaison à une fonction qui renvoie une primitive (chaîne)
  • Liaison à la propriété de l'objet
  • Liaison bidirectionnelle à la propriété d'un objet

J'aime illustrer des choses simples par des exemples simples :)

Voici un Serviceexemple très simple :

angular.module('toDo',[])

.service('dataService', function() {

  // private variable
  var _dataObj = {};

  // public API
  this.dataObj = _dataObj;
})

.controller('One', function($scope, dataService) {
  $scope.data = dataService.dataObj;
})

.controller('Two', function($scope, dataService) {
  $scope.data = dataService.dataObj;
});

Et ici le jsbin

Et voici un Factoryexemple très simple :

angular.module('toDo',[])

.factory('dataService', function() {

  // private variable
  var _dataObj = {};

  // public API
  return {
    dataObj: _dataObj
  };
})

.controller('One', function($scope, dataService) {
  $scope.data = dataService.dataObj;
})

.controller('Two', function($scope, dataService) {
  $scope.data = dataService.dataObj;
});

Et ici le jsbin

Si c'est trop simple, voici un exemple plus sophistiqué

Voir également la réponse ici pour des commentaires sur les meilleures pratiques

--- Je sais que cette réponse n'est pas pour cette question, mais je veux que les gens qui lisent cette question et veulent gérer des services tels que les usines pour éviter tout problème ----

Pour cela, vous devrez utiliser un service ou une usine.

Les services sont la MEILLEURE PRATIQUE pour partager des données entre des contrôleurs non imbriqués.

Une très très bonne annotation sur ce sujet concernant le partage de données est de savoir comment déclarer des objets. J'ai été malchanceux parce que je suis tombé dans un piège AngularJS avant de lire à ce sujet et j'étais très frustré. Alors laissez-moi vous aider à éviter ce problème.

J'ai lu dans le "ng-book: Le livre complet sur AngularJS" que les modèles AngularJS ng créés dans les contrôleurs en tant que données nues sont faux!

Un élément $ scope doit être créé comme ceci:

angular.module('myApp', [])
.controller('SomeCtrl', function($scope) {
  // best practice, always use a model
  $scope.someModel = {
    someValue: 'hello computer'
  });

Et pas comme ça:

angular.module('myApp', [])
.controller('SomeCtrl', function($scope) {
  // anti-pattern, bare value
  $scope.someBareValue = 'hello computer';
  };
});

En effet, il est recommandé (MEILLEURE PRATIQUE) pour le DOM (document html) de contenir les appels comme

<div ng-model="someModel.someValue"></div>  //NOTICE THE DOT.

Ceci est très utile pour les contrôleurs imbriqués si vous voulez que votre contrôleur enfant puisse changer un objet du contrôleur parent ....

Mais dans votre cas, vous ne voulez pas d'étendues imbriquées, mais il existe un aspect similaire pour obtenir des objets des services vers les contrôleurs.

Disons que vous avez votre service 'Factory' et dans l'espace de retour il y a un objectA qui contient objectB qui contient objectC.

Si à partir de votre contrôleur vous voulez OBTENIR l'objectC dans votre portée, c'est une erreur de dire:

$scope.neededObjectInController = Factory.objectA.objectB.objectC;

Cela ne fonctionnera pas ... Utilisez plutôt un seul point.

$scope.neededObjectInController = Factory.ObjectA;

Ensuite, dans le DOM, vous pouvez appeler objectC à partir de objectA. Il s'agit d'une meilleure pratique liée aux usines et, plus important encore, elle aidera à éviter les erreurs inattendues et non capturables.

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>

L'échantillon ci-dessus a fonctionné comme un charme. Je viens de faire une modification au cas où j'aurais besoin de gérer plusieurs valeurs. J'espère que ça aide!

app.service('sharedProperties', function () {

    var hashtable = {};

    return {
        setValue: function (key, value) {
            hashtable[key] = value;
        },
        getValue: function (key) {
            return hashtable[key];
        }
    }
});

J'ai tendance à utiliser des valeurs, heureux pour quiconque de discuter de pourquoi c'est une mauvaise idée ..

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

myApp.value('sharedProperties', {}); //set to empty object - 

Injectez ensuite la valeur selon un service.

Définissez dans ctrl1:

myApp.controller('ctrl1', function DemoController(sharedProperties) {
  sharedProperties.carModel = "Galaxy";
  sharedProperties.carMake = "Ford";
});

et accès depuis ctrl2:

myApp.controller('ctrl2', function DemoController(sharedProperties) {
  this.car = sharedProperties.carModel + sharedProperties.carMake; 

});

L'exemple suivant montre comment passer des variables entre les contrôleurs de la fratrie et effectuer une action lorsque la valeur change.

Exemple de cas d'utilisation: vous avez un filtre dans une barre latérale qui modifie le contenu d'une autre vue.

angular.module('myApp', [])

  .factory('MyService', function() {

    // private
    var value = 0;

    // public
    return {
      
      getValue: function() {
        return value;
      },
      
      setValue: function(val) {
        value = val;
      }
      
    };
  })
  
  .controller('Ctrl1', function($scope, $rootScope, MyService) {

    $scope.update = function() {
      MyService.setValue($scope.value);
      $rootScope.$broadcast('increment-value-event');
    };
  })
  
  .controller('Ctrl2', function($scope, MyService) {

    $scope.value = MyService.getValue();

    $scope.$on('increment-value-event', function() {    
      $scope.value = MyService.getValue();
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
  
  <h3>Controller 1 Scope</h3>
  <div ng-controller="Ctrl1">
    <input type="text" ng-model="value"/>
    <button ng-click="update()">Update</button>
  </div>
  
  <hr>
  
  <h3>Controller 2 Scope</h3>
  <div ng-controller="Ctrl2">
    Value: {{ value }}
  </div>  

</div>

Je voudrais contribuer à cette question en soulignant que la façon recommandée de partager des données entre les contrôleurs, et même des directives, consiste à utiliser des services (usines) comme cela a déjà été souligné, mais je voudrais également fournir un exemple pratique de la façon de procéder.

Voici le plongeur de travail: http://plnkr.co/edit/Q1VdKJP2tpvqqJL1LF6m?p=info

Tout d'abord, créez votre service , qui aura vos données partagées :

app.factory('SharedService', function() {
  return {
    sharedObject: {
      value: '',
      value2: ''
    }
  };
});

Ensuite, injectez-le simplement sur vos contrôleurs et récupérez les données partagées sur votre portée:

app.controller('FirstCtrl', function($scope, SharedService) {
  $scope.model = SharedService.sharedObject;
});

app.controller('SecondCtrl', function($scope, SharedService) {
  $scope.model = SharedService.sharedObject;
});

app.controller('MainCtrl', function($scope, SharedService) {
  $scope.model = SharedService.sharedObject;
});

Vous pouvez également le faire pour vos directives , cela fonctionne de la même manière:

app.directive('myDirective',['SharedService', function(SharedService){
  return{
    restrict: 'E',
    link: function(scope){
      scope.model = SharedService.sharedObject;
    },
    template: '<div><input type="text" ng-model="model.value"/></div>'
  }
}]);

J'espère que cette réponse pratique et claire pourra être utile à quelqu'un.

Vous pouvez le faire avec des services ou des usines. Ils sont essentiellement les mêmes à part pour certaines différences fondamentales. J'ai trouvé cette explication sur thinkster.io la plus simple à suivre. Simple, précis et efficace.

Ne pourriez-vous pas également intégrer la propriété au parent des étendues?

$scope.$parent.property = somevalue;

Je ne dis pas que c'est vrai mais ça marche.

Ah, ayez un peu de ces nouveaux trucs comme une autre alternative. C'est localstorage, et fonctionne là où angulaire fonctionne. De rien. (Mais vraiment, merci le gars)

https://github.com/gsklee/ngStorage

Définissez vos valeurs par défaut:

$scope.$storage = $localStorage.$default({
    prop1: 'First',
    prop2: 'Second'
});

Accédez aux valeurs:

$scope.prop1 = $localStorage.prop1;
$scope.prop2 = $localStorage.prop2;

Stockez les valeurs

$localStorage.prop1 = $scope.prop1;
$localStorage.prop2 = $scope.prop2;

N'oubliez pas d'injecter ngStorage dans votre application et $ localStorage dans votre contrôleur.

Il y a deux façons de faire ça

1) Utilisez le service get / set

2) $scope.$emit('key', {data: value}); //to set the value

 $rootScope.$on('key', function (event, data) {}); // to get the value

Deuxième approche:

angular.module('myApp', [])
  .controller('Ctrl1', ['$scope',
    function($scope) {

    $scope.prop1 = "First";

    $scope.clickFunction = function() {
      $scope.$broadcast('update_Ctrl2_controller', $scope.prop1);
    };
   }
])
.controller('Ctrl2', ['$scope',
    function($scope) {
      $scope.prop2 = "Second";

        $scope.$on("update_Ctrl2_controller", function(event, prop) {
        $scope.prop = prop;

        $scope.both = prop + $scope.prop2; 
    });
  }
])

Html:

<div ng-controller="Ctrl2">
  <p>{{both}}</p>
</div>

<button ng-click="clickFunction()">Click</button>

Pour plus de détails, voir plunker:

http://plnkr.co/edit/cKVsPcfs1A1Wwlud2jtO?p=preview

Si vous ne voulez pas faire de service, vous pouvez le faire.

var scope = angular.element("#another ctrl scope element id.").scope();
scope.plean_assign = some_value;

Outre $ rootScope et les services, il existe une solution alternative propre et simple pour étendre angulaire pour ajouter les données partagées:

dans les contrôleurs:

angular.sharedProperties = angular.sharedProperties 
    || angular.extend(the-properties-objects);

Ces propriétés appartiennent à un objet «angulaire», séparé des étendues, et peuvent être partagées dans des étendues et des services.

1 avantage de ne pas avoir à injecter l'objet: ils sont accessibles n'importe où immédiatement après votre définition!