Utiliser les atouts de la directive angulaire dans son modèle

Comment puis-je utiliser la valeur d'un attribut dans une directive? Mon élément ressemble à ceci:

<div class="tooltip-icon" data-my-tooltip="click" data-tooltip-title="foo" data-tooltip-content="test content"></div> 

J'aimerais utiliser cela dans le modèle de ma directive, qui ressemble à ceci:

 mainApp.directive('myTooltip', function() { // allowed event listeners var allowedListeners = ["click"]; return { restrict: 'A', template: '<div class="tooltip-title">...</div>' + '<div class="tooltip-content">' + '...</div>', link: function(scope, elm, attrs) { if(allowedListeners.indexOf(attrs.myTooltip) != -1){ elm.bind(attrs.myTooltip, function(){ ... }); } } }; } ); 

Lorsque les points triples sont là, il devrait y avoir un code, mais je ne peux pas comprendre comment obtenir le contenu de l'objet attrs.tooltipTitle ( attrs.tooltipTitle , etc.) dans ce modèle.

Vous pouvez extraire les attributs et les placer dans la portée de la directive comme ceci:

 angular.module('myApp', []). directive('myTooltip', function ($log) { // allowed event listeners var allowedListeners = ["click"]; return { restrict: 'A', template: '<div class="tooltip-title">{{tooltipTitle}}</div>' + '<div class="tooltip-content">' + '{{tooltipContent}}</div>', scope: { tooltipTitle: '@tooltipTitle', tooltipContent: '@tooltipContent' }, link: function (scope, elm, attrs) { if (allowedListeners.indexOf(attrs.myTooltip) != -1) { elm.bind(attrs.myTooltip, function () { $log.info('clicked'); }); } } }; }); 

Voici le violon: http://jsfiddle.net/moderndegree/f3JL3/

Cette question a déjà été répondu, mais je vais également partager mon code angulaire, car il s'agit d'un domaine où il est souvent utile de voir quelques exemples pratiques.

J'ai quelques pages Web, chacune avec leur propre contrôleur angulaire, et je voulais un moyen d'avoir une fenêtre contextuelle "Patientez" sur chaque page, qui apparaîtrait lorsque l'une des pages appelées un service HTTP GET ou POST.

Entrez la description de l'image ici

Pour ce faire, chacune de mes pages Web contient cette ligne:

 <please-wait message="{{LoadingMessage}}" ></please-wait> 

… qui est lié à une $scope dans le contrôleur de cette page …

 $scope.LoadingMessage = "Loading the surveys..."; 

Voici le code de ma directive <please-wait> :

 myApp.directive('pleaseWait', function ($parse) { return { restrict: 'E', replace: true, scope: { message: '@message' }, link: function (scope, element, attrs) { scope.$on('app-start-loading', function () { element.fadeIn(); }); scope.$on('app-finish-loading', function(){ element.animate({ top: "+=15px", opacity: "0" }, 500); }); }, template: '<div class="cssPleaseWait"><span>{{ message }}</span></div>' } }); 

Notez comment il reprend l'attribut message ( {{LoadingMessage}} dans cet exemple) et peut afficher sa valeur dans le modèle de la directive.

(C'est en fait la seule partie de ma réponse qui répond directement à cette question, mais lisez la suite, pour quelques conseils supplémentaires … pas de questions …)

Maintenant, la partie fraîche est que chacun de mes contrôleurs appelle un service de données Angular chaque fois qu'il veut charger ou enregistrer des données de / vers un service Web.

  $scope.LoadAllSurveys = function () { DataService.dsLoadAllSurveys($scope).then(function (response) { // Success $scope.listOfSurveys = response.GetAllSurveysResult; }); } 

La fonction dsLoadAllSurveys ressemble à ceci …

 myApp.webServicesURL = "http://localhost:15021/Service1.svc"; myApp.factory('DataService', ['$http', 'httpPostFactory', 'httpGetFactory', function ($http, httpPostFactory, httpGetFactory) { var dsLoadAllSurveys = function (scope) { // Load all survey records, from our web server var URL = myApp.webServicesURL + "/getAllSurveys"; return httpGetFactory(scope, URL); } return { dsLoadAllSurveys: dsLoadAllSurveys } }]); 

Et, de façon cruciale, tous les appels de service Web "GET" fonctionnent via la fonction suivante, qui affiche le contrôle "Attendre" pour nous … puis le fait disparaître lorsque le service est terminé.

 myApp.factory('httpGetFactory', function ($http, $q) { return function (scope, URL) { // This Factory method calls a GET web service, and displays a modal error message if something goes wrong. scope.$broadcast('app-start-loading'); // Show the "Please wait" popup return $http({ url: URL, method: "GET", headers: { 'Content-Type': undefined } }).then(function (response) { scope.$broadcast('app-finish-loading'); // Hide the "Please wait" popup if (typeof response.data === 'object') { return response.data; } else { // invalid response return $q.reject(response.data); } }, function (errorResponse) { scope.$broadcast('app-finish-loading'); // Hide the "Please wait" popup // The WCF Web Service returned an error. // Let's display the HTTP Status Code, and any statusText which it returned. var HTTPErrorNumber = (errorResponse.status == 500) ? "" : "HTTP status code: " + errorResponse.status + "\r\n"; var HTTPErrorStatusText = errorResponse.statusText; var message = HTTPErrorNumber + HTTPErrorStatusText; BootstrapDialog.show({ title: 'Error', message: message, buttons: [{ label: 'OK', action: function (dialog) { dialog.close(); }, draggable: true }] }); return $q.reject(errorResponse.data); }); }; }); 

Ce que j'adore de ce code, c'est que cette fonction s'attaque à l'affichage ou à la dissimulation de la fenêtre contextuelle "Patientez", et si une erreur se produit, elle prend également en compte l'affichage du message d'erreur (en utilisant l'excellente bibliothèque BootstrapDialog ) avant de renvoyer le résultat de l'erreur Retour à l'appelant.

Sans cette fonction d'usine, chaque fois qu'un de mes contrôleurs angulaires appelle un service Web, il faudrait que l'on montre, puis le cache, le contrôle "Patientez" et vérifiez les erreurs.

Maintenant, je peux simplement appeler mon service Web, et la laisser informer l'utilisateur si quelque chose ne va pas, sinon je peux supposer que tout fonctionne et traiter les résultats.

Cela me permet d'avoir un code beaucoup plus simple. Rappelez-vous comment j'ai appelé ce service Web:

  DataService.dsLoadAllSurveys($scope).then(function (response) { // Success $scope.listOfSurveys = response.GetAllSurveysResult; }); 

Ce code a l' air de ne pas faire de gestion des erreurs, alors qu'en réalité, tout est surveillé derrière les scènes en un seul endroit.

Je suis toujours en train de trouver des machines et des services de données avec Angular, mais je pense que c'est un exemple effrayant de la façon dont ils peuvent aider.

J'espère que cela a du sens et aide.