Angularjs filtre personnalisé et l'injection de dépendance

Je suis nouveau sur AngularJS et je vois cette syntaxe beaucoup:

function someFunc(){
   return function(input){
    return 'hello' + input;
  }
}

La fonction ci-dessus est une syntaxe générale, j'ai tendance à voir beaucoup de choses mais le problème est spécifique à cet exemple de filtre personnalisé:

angular.module('bookFilters', [])
    .filter('newBookFilter', function(){
          return function(input){
        return 'The Book: ' + input.name + 'is new !';
   };
});

Je comprends que l'emballage de la fonction à une autre fonction me donne l'occasion d'utiliser l'injection de dépendance, Voici mes questions à ce sujet:

Le filtre d'obtenir la fonction renvoyée de l'emballage de la fonction? Alors est-il en mesure d'utiliser l'injection de dépendance pour injecter de la valeur dans la fonction? , En théorie, qu':

Ce code:

{{bookObj | newBookFilter}}

Deviendra:

{{   bookObj | function(input){return 'The Book: ' + input.name + 'is new !'; }  }}

Et enfin la {{}} sera de retour la dernière valeur de la fonction.

Pourquoi ne puis-je pas simplement d'injecter de l' input à la première fonction comme:

angular.module('bookFilters', [])
         .filter('newBookFilter', function(input){
             return 'The Book: ' + input.name + 'is new !';
     });

Pourquoi l'injection de dépendance ne fonctionnera que sur la fonction renvoyée?

Je sais que j'ai vraiment confus ici, Si quelqu'un peut m'aider je serai très reconnaissant, Merci à vous tous et bonne journée.

nous utilisons la même fonction (.le filtre) avec les mêmes paramètres => il devrait y avoir un seul de la mise en œuvre. Comment peut-angulaire cadre de différencier vos premier cas et votre deuxième cas?
si il y avait quelque chose comme ça, il y aurait 2 différentes fonctions similaires à ce que nous avons comme .factory et .service
Pouvez-vous m'aider à comprendre pourquoi angularjs nécessite 2 fonctions pour être en mesure d'utiliser l'injection de dépendance?
non, ce n'est pas que angular js nécessite 2 fonctions. Je veux dire, si il y avait plusieurs façons de déclarer un service (d'être injecté à d'autres), il doit y avoir des fonctions différentes, chacune mise en œuvre.

OriginalL'auteur Aviel Fedida | 2014-01-11

  1. 11

    Je pense Angulaire de l'usine, de service, de filtrer, de la directive wrappers comme les fours qui créent des objets JavaScript et fonctions Angulaire de saveurs. Donc, pour emprunter le même style de Vasiliy réponse:

    //Don't use this code in a real app. It's just to illustrate a point.
angular.module('App', [])

//The following oven makes an Angular flavored JavaScript function that 
//formats a currency
.service('currencyBadFilterFn',
  //We inject a built-in Angular filter, currencyFilter, into our oven
  function(currencyFilter) { 
    //oven produces a function that can be used in other places in Angular code
    return function(number) {
      //produced function returns a currency-formatted number when used
      return currencyFilter(number)   
    }
  }
)

.controller('MainCtrl',
  function($scope, currencyBadFilterFn) {
    $scope.amount = currencyBadFilterFn(10) //$10.00
  }
)

    Comme vous pouvez le voir, le même modèle est utilisé dans la création de services. Ici, nous créons un service qui retourne une fonction que l'on peut utiliser dans d'autres endroits dans notre code.

    La première fonction, le four, avec la .service ou .factory ou .filter wrapper, dit Angulaire comment construire votre fonction. La valeur de retour de cette fonction première est ce que vous allez utiliser dans votre code.

    Donc, comme je le comprends, je peux utiliser l'injection de dépendance que pour la fonction wrapper, Le tout idée, c'est comme usine d'instancier ceux que la valeur utilisée plusieurs fois?
    oui! La valeur retournée par ces wrappers est un singleton qui peut être utilisé dans d'autres endroits dans votre code.
    Donc, la raison(en plus de l'singleton avantage) pour l'utilisation de 2 fonctions est que 1 (fonction wrapper) prendra les dépendances et le renvoi de la fonction recevra les valeurs réelles, Parce que comme je l'ai remarqué sur Vasiliy exemple je ne peux pas utiliser les valeurs réelles passée à l'intérieur de la fonction wrapper, mais seule la fonction est d'obtenir les valeurs.
    Aussi je voulais vous demander, Est la fonction à l'intérieur d'une fonction est un type de fermeture?
    laissez-nous continuer cette discussion dans le chat

    OriginalL'auteur M.K. Safi

  2. 20

    La réponse est à l'opposé de votre question. Angulaire injecte seulement en fonction de fabrication mais pas en fonction résultant:

       .filter('newBookFilter', function($log, ...){ //<- factory function
       return function(input, ...){              //<- resulting function
       };
   })

    Usine de la fonction arbitraire injecté paramètres. Résultant de la fonction des paramètres fixes.

    Deuxième raison est que vous pouvez faire une initialisation en fonction de fabrication. C'est utile par exemple lorsque vous définissez nouvelle directive. Aussi l'usine retourne une fermeture qui peut capturer les variables et les arguments de l'usine de la fonction. Voir l'exemple ci-dessous. Il utilise l'injection de dépendance pour obtenir la journalisation de l'objet. Ici est plein exemple.

      .filter('joinBy', function ($log) {     //<- injected here
    return function (input, delimiter) {  //<- used here
      var res = (input || []).join(delimiter || ',');
      $log.info(res);
      return res;
    };
  });
    Hey vassiliy je vous remercie pour votre réponse, pouvez-vous expliquer: "l'Usine de la fonction arbitraire injecté paramètres. Résultant de la fonction des paramètres fixes."....
    j'ai marqué la fonction de l'usine et qui est en résultant(voir le premier bloc de code). Par "arbitraire injecté paramètres", je veux dire que angulaires va passer "nécessaire" paramètres de l'intérieur de cette fonction. Angulaire voit les arguments de la fonction des noms de comprendre que la fonction que vous voulez "manger" comme paramètre.
    Par "paramètres fixes", je veux dire que angulaires envoie toujours le même ensemble de paramètres et de ne pas voir les arguments des noms. Un bon exemple est le "lien" dans la définition de la nouvelle directive. Il ont toujours des 4 paramètres (dernier est facultatif). Je ne suis pas sûr à 100% sur le résultat de la fonction filtre. Je vais faire des recherches pour les documents.
    Ici est la description des arguments pour la fonction obtenue. Ici c'est la réponse à la question initiale "définition de filtre se compose d'une usine d'une fonction qui est annoté avec dépendances et est responsable de la création d'une fonction de filtre" (fonction de filtre est pas annoté avec dépendances)
    Si vous êtes minifying cela, il ne fonctionne pas. La minification va manger le journal de $puis angulaire de ne pas être en mesure de le résoudre. Savez-vous comment définir ce avec la notation de chaîne de caractères comme vous le faites contrôleurs etc?

    OriginalL'auteur Vasiliy Kevroletin

  3. 0

    C'est la façon dont je l'ai fait.

    myApp.filter("myCustomDateFormatter", ['MyFactoryWithCustomFunctions', function (InjectedCustomFunction) {
    return function (input) {
        return InjectedCustomFunction.GetDateFromDotNetJson(input);
    }
}]);

    OriginalL'auteur Mahesh