Javascript Girl
  1. Javascript Girl
  3. Envoyer un événement en utilisant $ emit de directive vers contrôleur
Intereting Posts
Window.open location = no ne fonctionne pas Jquery file upload send tous les fichiers dans un seul article Javascript: j'ai un menu personnalisé avec le bouton droit de la souris mais j'aimerais toujours le correctif orthographique! Obtenir un nœud de texte d'un élément Bibliothèque d'Algèbre linéaire pour Javascript? Obtention d'une erreur non détectée: erreur de syntaxe, expression non reconnue Exclure le code JavaScript de débogage pendant la minification Calculer l'intersection de deux tableaux en JavaScript Puis-je savoir si mon extension Chrome est exécutée sur Windows? Définir des modèles de squelette Javascript innerhtml de case à cocher Images de toile et événement de clic La méthode instantanée de traduction angulaire ne fonctionne pas Cross-dominio ajax échoue même pour un fichier local Existe-t-il un moyen de détecter que je suis dans une page de Webdriver Selenium de Javascript

Envoyer un événement en utilisant $ emit de directive vers contrôleur

J'essaie d'envoyer un événement lorsqu'un élément est sélectionné, de la directive au contrôleur en utilisant $emit . J'ai deux fonctions de mise à jour pour les organisations et une autre pour les personnes. Ma directive devrait spécifier quel événement devrait émettre.

Voici mes fonctions de mise à jour

// Pour l'organisation 

  $scope.updateOrgs = function(selectedVal) { }

// Pour les personnes 

 $scope.updatepeople = function(selectedVal, type) { }

Lorsque ce sont des personnes, ma directive devrait générer un événement d' updatepeople () pour updatepeople () , si c'était org, il devrait augmenter updateorg() .

Ma directive ressemble à … 

 .directive('search', function ($timeout) { return { restrict: 'AEC', scope: { model: '=', searchobj: '@', }, link: function (scope, elem, attrs, index) { scope.handleSelection = function (selectedItem) { scope.model = selectedItem; scope.searchModel=""; scope.current = 0; scope.selected = true; $timeout(function () { scope.onSelectupdate(); }, 200); }; scope.Delete = function (index) { scope.selectedIndex = index; scope.delete({ index: index }); }; scope.Search = function (searchitem,event,searchobj) { // alert('item entered'+name) scope.searching = searchitem; scope.searchobject = searchobj; scope.onSearch({ searchitem: searchitem , searchobj:searchobj}); }; scope.current = 0; scope.selected = true; scope.isCurrent = function (index) { return scope.current == index; }; scope.setCurrent = function (index) { scope.current = index; }; }, controller: ['$scope','$element','$rootScope','SearchOrg', function($scope,$element,$rootScope,SearchOrg) { $scope.searchItem = function(filter,searchobj){ //alert('search'+searchobj); SearchOrg().fetch({'filter': filter, 'searchType': searchobj}).$promise.then(function(value){ $scope.searchData = value.data; console.info($scope.searchData); }, function(err) { }); } }], templateUrl: TAPPLENT_CONFIG.HTML_ENDPOINT[0] + 'home/genericsearch.html' } });;

Extrait HTML 

 <search searchobj=“tei-org” selectedItems=“arrayofIds” search-id=”someidtoIdentify”/>

Comment puis-je faire cela, les deux fonctions sont dans des contrôleurs différents, et j'ai-je besoin d'envoyer des paramètres de la directive au contrôleur en utilisant $emit ?

Travailler avec $ scope. $ Emit et $ scope. $ On

Je suppose que vos autres contrôleurs ne sont pas des parents, alors regardez la deuxième option en utilisant $broadcast . 

 var app = angular.module('app', []); app.controller('firstController', function($scope) { $scope.selectedOrgs = [] $scope.$on('updateorgs', function(evt, data) { $scope.selectedOrgs.push(data); }); }); app.controller('secondController', function($scope) { $scope.selectedPeople = [] $scope.$on('updatepeople', function(evt, data) { $scope.selectedPeople.push(data); }); }); app.directive('someDirective', function($rootScope) { return { scope: {}, link: function(scope) { scope.options = [{ id: 1, label: 'org a', type: 'org' }, { id: 2, label: 'org b', type: 'org' }, { id: 3, label: 'person a', type: 'person' }, { id: 4, label: 'person b', type: 'person' }]; scope.changed = function() { if (scope.selected) { var updatetype = scope.selected.type; if (updatetype === 'person') { $rootScope.$broadcast('updatepeople', scope.selected); } else if (updatetype === 'org') { $rootScope.$broadcast('updateorgs', scope.selected); } } }; }, template: '<select ng-change="changed()" ng-model="selected" ng-options="option.label for option in options"><option value="">Select</option></select>' }; }); 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <div ng-app='app'> <some-directive></some-directive> <div ng-controller='firstController'> <div>ORGS:</div> <div> {{ selectedOrgs }} </div> </div> <div ng-controller='secondController'> <div>PEOPLE:</div> <div> {{ selectedPeople }} </div> </div> </div>