Utilisation Angulaire attributs de Directive dans son modèle

Cette question a déjà été répondu, mais je vais partager mon Angulaire code aswell, comme c'est un domaine où il est souvent utile de voir quelques exemples de travail.

J'ai un peu de pages, chacune avec leur propre Angulaire contrôleur, et je voulais un moyen d'avoir un "Veuillez Patienter" popup sur chaque page, ce qui apparaît lorsque l'une des pages appelé un HTTP GET ou POST service web.

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

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

...qui est lié à un $scope dans la page de contrôleur...

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

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

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>'
        }
    });

Remarquez comment elle prend la message attribut ({{LoadingMessage}} dans cet exemple) et d'afficher sa valeur dans la directive du modèle.

(Qui est en fait la seule partie de ma réponse qui répond directement à cette question, mais à lire, pour un peu plus de conseils n'tricks...)

Maintenant, la partie la plus cool, c'est que chacun de mes contrôleurs appels Angulaire de service de données chaque fois qu'il souhaite charger ou d'enregistrer des données à partir d'un service web.

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

La dsLoadAllSurveys fonction ressemble à...

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, surtout, tous les "GET" appels de service web via la fonction suivante, qui affiche le s'il vous Plaît Attendre de contrôle pour nous... pour ensuite s'en aller, 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'aime à propos de ce code est que cette fonction s'occupe de l'affichage/masquage de la "Veuillez patienter" popup, et si une erreur se produit, il semble également après l'affichage du message d'erreur (à l'aide de l'excellent BootstrapDialog bibliothèque), avant de retourner le résultat de l'erreur à l'appelant.

Sans cette usine de la fonction, chaque fois que l'un de mes Angulaire contrôleurs pourrait appeler un service web, il serait nécessaire de montrer, ou alors de le cacher, le "Veuillez patienter" de contrôle et de vérification des erreurs.

Maintenant, je peux juste appeler mon service web, et de laisser il pour informer l'utilisateur si quelque chose va mal, sinon je peux supposer que c'est tout a fonctionné, et de traiter les résultats.

Cela me permet d'avoir un code bien plus simple. Rappelez-vous comment j'ai appelé le service web:

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

Que le code semble comme si elle n'effectue pas de gestion d'erreur, alors qu'en fait, c'est tout entretenu derrière les scènes dans un seul endroit.

Je suis encore en train de les accrocher des usines et des services de données Angulaire, mais je pense que c'est un stonking exemple de la façon dont ils peuvent aider.

Espérons que cela a du sens, et de l'aide.