Je développe à l'aide d'une lunette angulaire 1.5.8 et dossier J'ai une directive qui est utilisée sous la portée d'une autre directive (et un autre contrôleur bien sûr). Disons directive1, contrôleur1 et directive2, contrôleur2. Compte tenu du contrôleur1 dispose déjà des informations de l'utilisateur, je voudrais transmettre ces informations d'utilisateur au contrôleur2 via la directive2, pour éviter de récupérer les informations à nouveau à partir du backend. Je ne suis pas sûr que cela puisse être fait, mais ce serait bien si tel est le cas :)
ci-dessous est le code pour aider mon explication: p>
directive1 HTML: P>
class Directive2 implements ng.IDirective {
controller = "Directive2Ctrl";
controllerAs = "d2Ctrl";
bindToController = {
user: "@"
};
restrict = "E";
templateUrl = "directive2.html";
static factory(): ng.IDirectiveFactory {
const directive = () => new Directive2();
return directive;
}
}
angular
.module("app")
.controller("Directive2Ctrl", Directive2Ctrl)
.directive("directive2", Directive2.factory());
class Directive2Ctrl implements IDirective2Ctrl {
public user: User;
constructor(user: User) {
// user is undefined
}
$onInit(user: User): void {
// user is undefined
}
}
5 Réponses :
Désolé, je me demande si vous avez toujours besoin de définir la portée = {}
La directive2 ne nécessite pas de directive1. Cela nécessite un utilisateur. Dans ce cas, il est utilisé sous la portée d'un contrôleur qui a un utilisateur, mais il ne doit pas nécessairement être contrôleur1.
Je suppose que je suis légèrement confus, pour ne pas définir votre application pour être utilisateur: "=", au lieu de l'utilisateur: "@", sur votre liaison au contrôleur
J'ai déjà essayé la portée = {}; En plus de changer le @ avec = mais toujours pas de succès.
Si vous souhaitez partager des données entre différents emplacements de votre application, mettez-le simplement dans un service et utilisez DI partout où vous avez besoin des données.
C'est-à-dire, récupérez les données, stockez-le dans un service et utilisez-le rendre les données disponibles dans différents endroits. Il n'est pas nécessaire de passer des données à travers plusieurs couches, beaucoup plus facile à utiliser un service. P>
p>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.12/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.12/angular-route.min.js"></script> <div ng-app="testApp"> <div ng-view></div> </div>
Mais je ne veux plus chercher les données. Parce que Controller1 a déjà récupéré les données utilisateur et la directive que j'utilise est à l'intérieur du contrôleur1 HTML. Je voudrais donc simplement le transmettre en tant que paramètre. Je pense que la portée $ est utilisée à cette fin, mais je ne précise pas comment le faire fonctionner sur mon implémentation dossée.
Ah, peut-être que je manque de vous .. Vous voulez dire tirer les données du backend une fois, puis le rendre disponible pour tout contrôleur via un service? Je pense que ce serait bien mieux. Avez-vous un échantillon de cela?
Exactement, j'ai ajouté un extrait de code court, qui démontre un problème commun dans les applications angulaires. Habituellement, pour certaines données de l'état doivent être extraites du serveur (moqueur avec appel $ Timeout). Ensuite, ces données sont souvent partagées dans plusieurs endroits. J'espère que cet exemple aide.
Utilisez la propriété "Scope" au lieu de la propriété "Bindtocontroller" et remplacez votre "@" avec "=". Ensuite, j'utilise une interface pour ma portée spécifique pour obtenir une autocalistion.
<div>
...
<directive2 user="ctrl.loggedUser"></directive2>
...
</div>
J'ai essayé de créer un plumker, mais je ne sais pas comment compiler des types de documents sur PLUCKER.
Pour compiler, vous devez ajouter vos importations dans votre fichier .TS.
Cela devrait être comme ça. Mais si cela ne fonctionne toujours pas pour vous, vous pouvez créer un simple plumber et je vais le réparer là-bas. Bravo! ` P> class Directive2 implements ng.IDirective {
controller = "Directive2Ctrl";
controllerAs = "d2Ctrl";
scope = {},
bindToController = {
user: "="
};
restrict = "E";
templateUrl = "directive2.html";
static factory(): ng.IDirectiveFactory {
return () => new Directive2();
}
}
angular
.module("app")
.controller("Directive2Ctrl", Directive2Ctrl)
.directive("directive2", Directive2.factory());
class Directive2Ctrl implements IDirective2Ctrl {
public user: User;
$onInit(user: User): void {
// user should be available
console.log(this.user);
}
}
J'ai créé ce plunker bien que cela ne fonctionne pas encore (je ne sais pas comment compiler documentation dans Plunker). PLUCKER PLNKR.CO/EDIT/0VSQHVRG2YIKHCQ2NJNY?P=Info "> Plunker >
Pour faire ce que j'ai demandé en premier lieu, la portée doit être correctement utilisée.
Voici une autre question qui est bien expliquée qui utilise correctement la portée:
Comment puis-je définir mon contrôleur à l'aide de documentscript?
Il devrait être
user = "ctrl.loggeturer" dans la vue (pas d'accolades bretelles) etutilisateur: "=" dans la définition de bindtocontroller (au lieu de @)Devrais-je utiliser la portée dans le contrôleur ou la directive? Ou devrait-il fonctionner sans avoir besoin d'utiliser la portée?
Non, vous n'avez pas besoin d'utiliser l'étendue explicitement si vous utilisez une liaison à la syntaxe du contrôleur