AngularJS - Appel d'une fonction de contrôleur à partir d'un service

Je suis tellement vert au Angulaire, je ne suis même pas sûr que j'ai été à la structuration d'une recherche de cette correctement. L'ensemble de la directive et de la terminologie du service est toujours me confondre certains, mais ce n'est pas ma question.

J'ai lu cet excellent article de la série d'avant en arrière: http://www.ng-newsletter.com/posts/beginner2expert-how_to_start.html

C'est pourquoi je suis à ce point dans mon application. Et pourquoi je sais que ma question a trait à la relation entre les services et les contrôleurs. Plutôt que de la syntaxe.

Voici donc un aperçu de l'application:

J'ai un contrôleur. Ce va et obtient un tas de données de la batterie de l'utilisateur à l'aide d'un appel AJAX vers un fichier PHP, et l'affiche sur l'écran à l'aide de ses propres $scope.

var masterApp = angular.module('masterApp', ['myFilters','commonControls']);

masterApp.controller('MasterCtrl', ['$scope','$http', '$filter', 'commonFarmSelector', 
    function($scope, $http, $filter, commonFarmSelector){

        ...

        $scope.masterCtrl.loadFarmData = function(farmId) {
            var postdata = {
               "farmId":farmId
            };

            $http.post('/service/farmproduction', postdata).success(function (data) {
                //Do stuff with the $scope using data
            }
        }

        $scope.masterCtrl.loadFarms();
}

Vous verrez que je suis l'injection de quelque chose appelé "commonControls". C'est un module que j'ai créé pour contenir les contrôles qui seront réutilisés par plusieurs contrôleurs. Dans ce cas, une liste déroulante qui contient une liste de fermes de l'utilisateur a accès (également obtenu par un appel AJAX):

var commonControlsApp = angular.module('commonControls', []);

commonControlsApp.controller('farmSelectorCtrl', ['$scope', '$http',function($scope, $http) {

    $scope.farmSelectorCtrl ={}

    //Change entire farm view when a different farm is selected
    $scope.farmSelectorCtrl.switchUserFarm = function() {
        var farmId = $scope.farmSelectorCtrl.selectedUserFarm;
        $scope.masterCtrl.loadFarms(farmId); //!!! Direct link to masterCtrl
    };

    //Get a list of the user's farms
    $http.post('/service/userfarms').success(function (data) {
        $scope.farmSelectorCtrl.userFarms = data.getFarmsPerUserResult.farmIds;
    });

}]);

Cela fonctionne bien. Mais comme vous pouvez le voir, le farmSelector est directement liée à masterCtrl. Et le comportement de cette loadFarmData fonction est spécifique à ce contrôleur. En d'autres termes, il ne font que des choses qui s'appliquent à cette page.

La chose est, ce farmSelector sera utilisé sur d'autres pages. Et le comportement précis d'un événement de changement sera différent pour chaque page. Donc j'ai du mal à savoir d'où ce comportement doit s'asseoir. Et comment il serait appelé dépend du contrôleur à l'aide de la farmSelector.

L'article lié ci-dessus suggère que cette farmSelector devrait être en service, de sorte qu'il peut être réutilisé ailleurs. Mais je suis encore confus sur la façon dont vous pourriez donner à un service générique spécifique l'action à entreprendre lorsqu'un événement est déclenché.

source d'informationauteur Aaryn

  1. 11

    Je recommande fortement d'un service, aussi bien pour la même raison, l'article suggère. Il a également une grande réponse à votre problème.

    Le terme technique pour ce que vous voulez, c'est un calback fonction. C'est, précisément, une action à entreprendre lorsqu'un événement est déclenché, et la section des Services, l'article donne un bon exemple de comment faire cela.

    Prendre un coup d'oeil à cette section de Services de l'article (que j'ai réduite pour les parties importantes)

    angular.module('myApp.services', [])
  .factory('githubService', ['$http', function($http) {

    var doRequest = function(username) {
      return $http({
        url: 'https://MySuperURL.com/getTheData'
      });
   }

    return {
      events: doRequest
    };

}]);

    Donc nous avons un service de maintenant appelé githubServicequi a une méthode: events (qui est vraiment juste un autre nom pour doRequest; j'ai gardé le renommer pour qu'il irait avec l'article du code.)

    Caché derrière les scènes, c'est la $q de l'API, qui est parfois appelé la "promesse" de l'API. La fonction $http renvoie une "promesse" de l'objet, ce qui est vraiment juste une façon pour le code de garder une trace de ce qui doit se passer lorsque la "promesse" est fait. Par exemple, regardons ce code suivant (à nouveau, modifié à partir de l'article de la version):

    app.controller('ServiceController', ['$scope', 'githubService',
function($scope, githubService) {

  //uses the $http service to call the GitHub API
  //and returns the resulting promise
  githubService.events(newUsername)
    .success(function(data, status, headers) {
         //do magic stuff with the result
         //(which is in the data param)
         $scope.events = data.data;
    })
});

    }]);

    C'est là que la magie se passe. Regardez l'appel à success()et vous verrez qu'elles sont réellement en passant un function qui doit être exécuté lors de la demande de travaux. La fonction a toujours accès à toutes les variables dans le ServiceController en raison de la fermeture, de sorte qu'il est permis d'utiliser $scope et d'autres variables. Cependant, il est très possible d'écrire un autre success() méthode dans chaque contrôleur par le passage d'une fonction différente à chaque fois, ce qui permet à plusieurs contrôleurs de différentes actions. Lorsque la requête est terminée, il va appeler tous les success fonction qui lui a été donné.

    Vous pourriez suivre cet exemple de code et d'obtenir un modèle de travail, mais je suggère également que vous jetez un oeil à $q angulaireet aussi de prendre un coup d'oeil à cet article sur les fonctions de callback. Vous avez besoin de comprendre à la fois pour vraiment obtenir ce qu'il se passe, mais la bonne nouvelle, c'est qu'ils sont tous les deux très souvent utilisés dans angulaire, de sorte qu'il sera utile de votre temps.