Javascript Girl
  1. Javascript Girl
  3. Angular Js newbie – lien dans une vue de contrôleur qui déclenche une autre action de contrôleur
Intereting Posts
Cette fonction intérieure Meilleures pratiques incluant javascript dans le modèle django Javascript: réinitialisation du formulaire réel pour les champs cachés Que puis-je utiliser avec Web Workers? Facebook sans surveillance SecurityError Changer de Javascript pour lire plusieurs fichiers CSV Comment récupérer les tags d'une vidéo YouTube avec YouTube v3 API? Jscroll n'affiche pas l'option de déclenchement (chargez plus d'option) Lorsque l'action de forme sur la même page, retirez-vous la position de la page? Performance de l'opérateur prototype Javascript: enregistre la mémoire, mais est-elle plus rapide? Comment appeler un fichier PHP à partir de HTML ou Javascript En appelant ap: remoteCommand via une fonction JavaScript transmettant un message local à cette fonction à une autre fonction via le gestionnaire «incomplet» Angulaire: comment passer des variables de portée $ dans le serveur Node.js. IE ne se présente pas; Éléments de forme ajoutés dynamiquement; Est-ce un bug IE? Les modifications ToLocaleDateString () dans IE11

Angular Js newbie – lien dans une vue de contrôleur qui déclenche une autre action de contrôleur

Newbie angulaire ici.

Disons que j'ai une application qui doit surveiller différentes choses comme "nouvelles soumises", "tentatives de connexion" et ainsi de suite. Mon responsable principal est chargé d'obtenir des informations sur ces opérations, d'extraire ces données d'un service et d'afficher ces informations dans un tableau de bord simple. 

<div ng-controller='mainController'> + ---------------------+ | NEWS Submitted: 1233 | | Login attempts: 233 | + ---------------------+ </div> <div ng-controller='newsController'></div> <div ng-controller='loginAttemptsController'></div>

J'aimerais que les numéros de données soient cliquables et, en cliquant dessus, j'aimerais que l'application (sans changer d'itinéraire) affiche dans la division relative les détails des données en cliquant. Donc, par exemple, la liste des nouvelles soumises ou les détails des tentatives de connexion. J'aimerais avoir la manipulation des détails des nouvelles soumises et des tentatives de connexion dans leur propre contrôleur.

Le problème est: comment puis-je faire un événement ng-click qui indique à angular d'invoquer une fonction spécifique d'un autre contrôleur?

Voilà comment cela fonctionnerait –

  1. À partir de votre contrôleur principal, émettez un événement vers le haut (par $ émettant). L'appel à $ emit expédie un nom d'événement vers le haut à travers la hiérarchie de portée en informant les auditeurs $ rootScope.Scope enregistrés.

  2. Inside newsController et loginAttemptsController ajoute un écouteur d'événement (en utilisant $ rootScope. $ On) pour écouter l'événement émis par mainController, obtenir des données de la portée cible (dans votre cas, la portée de son principalController) et le définir dans newsController et loginAttemptsController's scope model.

Pour plus de détails, passez par une documentation angulaire – https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope

J'ai mis en place une place ici – http://plnkr.co/edit/1dhdPfmB1WwAkYhsz4Hv

Exemple de code (modèle html): 

 <div ng-controller="mainController"> <button data-ng-click="OnNewButtonClick()">Show News</button> <button data-ng-click="OnLoginAttemptButtonClick()">Show Login Attempts</button> </div> <div ng-controller="newsController"> {{newsControllerData.News}} </div> <div ng-controller="loginAttemptsController"> {{loginAttemptsControllerData.loginAttempts}} </div>

Exemple de code (contrôleur principal): 

 app.controller("mainController", ["$rootScope", "$scope", function ($rootScope, $scope) { $scope.newsControllerData = {}; $scope.loginAttemptsControllerData = {}; // from mainController emit HandleNews upwards on the scope $scope.OnNewButtonClick = function () { $scope.newsControllerData.info = "Hello World"; $scope.$emit("HandleNews"); } // from mainController emit HandleLoginAttempts upwards on the scope $scope.OnLoginAttemptButtonClick = function () { $scope.loginAttemptsControllerData.info = "login count = 4"; $scope.$emit("HandleLoginAttempts"); } }]);

Exemple de code (contrôleur de nouvelles): 

 app.controller("newsController", ["$rootScope", "$scope", function ($rootScope, $scope) { $scope.newsControllerData = {}; // when any controller calls HandleNews, i would listen $rootScope.$on("HandleNews", function (evt, next, current) { $scope.newsControllerData.News = evt.targetScope.newsControllerData.info; }); }]);

Exemple de code (loginAttempts Controller): 

 app.controller("loginAttemptsController", ["$rootScope", "$scope", function ($rootScope, $scope) { $scope.loginAttemptsControllerData = {}; // when any controller calls HandleLoginAttempts, i would listen $rootScope.$on("HandleLoginAttempts", function (evt, next, current) { $scope.loginAttemptsControllerData.loginAttempts = evt.targetScope.loginAttemptsControllerData.info; }); }]);

Vous pouvez créer un service qui stockera les données entre les contrôleurs. Ensuite, vous pouvez utiliser / modifier ces données dans vos contrôleurs et vues associées. 

 app.service('newsDataService', function() { this.newsData = []; });

Puis dans votre contrôleur, 

 app.controller('newsController', function($scope, 'newsDataService') { // access the data using newsDataService.newsData. }); app.controller('loginAttemptsController', function($scope, 'newsDataService') { // access the data using newsDataService.newsData. });

Plus d'informations sur AngularJs Services: https://docs.angularjs.org/guide/services