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' Ctrl1
intérieur Ctrl2
car 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.
javascript
angularjs
angularjs-controller
dopatraman
la source
la source
Réponses:
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:
Utilisation du service dans un contrôleur:
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 devar property = 'First';
.MISE À JOUR: Pour (espérons-le) clarifier les choses, voici un violon qui montre un exemple de:
la source
both
pour être une fonction et elle sera appelée / réévaluée pendant le processus de résumé angulaire. Voir ce violon pour un exemple. De plus, si vous vous liez à la propriété d'un objet, vous pouvez l'utiliser directement dans votre vue et il se mettra à jour lorsque les données seront modifiées comme dans cet exemple .getProperty()
fonction à la portée et à utiliser $ scope. $ Watch comme dans cet exemple . J'espère que ces exemples vous aideront!.service
au lieu de.factory
comme décrit dans la documentation angulaire. Pourquoi cette réponse est-elle votée si haut alors que la documentation utilise une méthode différente?J'aime illustrer des choses simples par des exemples simples :)
Voici un
Service
exemple très simple :Et ici le jsbin
Et voici un
Factory
exemple très simple :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
la source
var _dataObj = {};
lorsque vous lui renvoyez une référence directe ..? Ce n'est pas privé . Dans le premier exemple, vous pouvez le fairethis.dataObj = {};
et dans le second,return { dataObj: {} };
c'est une déclaration de variable inutile IMHO.--- 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:
Et pas comme ça:
En effet, il est recommandé (MEILLEURE PRATIQUE) pour le DOM (document html) de contenir les appels comme
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:
Cela ne fonctionnera pas ... Utilisez plutôt un seul point.
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.
la source
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.
Utilisation de $ rootScope dans un modèle (Accéder aux propriétés avec $ root):
la source
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!
la source
.factory
. Un.service
doit être utilisé "si vous définissez votre service comme un type / classe" selon docs.angularjs.org/api/auto/service/$provide#serviceJ'ai tendance à utiliser des valeurs, heureux pour quiconque de discuter de pourquoi c'est une mauvaise idée ..
Injectez ensuite la valeur selon un service.
Définissez dans ctrl1:
et accès depuis ctrl2:
la source
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.
la source
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 :
Ensuite, injectez-le simplement sur vos contrôleurs et récupérez les données partagées sur votre portée:
Vous pouvez également le faire pour vos directives , cela fonctionne de la même manière:
J'espère que cette réponse pratique et claire pourra être utile à quelqu'un.
la source
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.
la source
Ne pourriez-vous pas également intégrer la propriété au parent des étendues?
Je ne dis pas que c'est vrai mais ça marche.
la source
NOTE: These controllers are not nested inside each other.
. S'il s'agissait de contrôleurs imbriqués ou de contrôleurs partageant le même parent, cela fonctionnerait, mais nous ne pouvons pas nous y attendre.$parent
si cela peut être évité. Un composant réutilisable bien conçu ne devrait pas connaître ses parents.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:
Accédez aux valeurs:
Stockez les valeurs
N'oubliez pas d'injecter ngStorage dans votre application et $ localStorage dans votre contrôleur.
la source
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
la source
Deuxième approche:
Html:
Pour plus de détails, voir plunker:
http://plnkr.co/edit/cKVsPcfs1A1Wwlud2jtO?p=preview
la source
Ctrl2
(l'écouteur) est un contrôleur enfant deCtrl1
. Les contrôleurs frères doivent communiquer via$rootScope
.Si vous ne voulez pas faire de service, vous pouvez le faire.
la source
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:
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!
la source
window
objet ... Si vous allez polluer angulaire, pourquoi ne pas simplement aller de l'avant et polluer l'objet fenêtre ...