Utiliser un trait de soulignement dans les contrôleurs angulaires

126

Comment utiliser la bibliothèque de soulignement dans les contrôleurs angularjs?

Sur cet article: AngularJS limitTo par les 2 derniers enregistrements, quelqu'un a suggéré d'assigner une variable _ au rootScope afin que la bibliothèque soit disponible pour toutes les étendues de l'application.

Mais je ne sais pas où le faire. Je veux dire, devrait-il aller sur la déclaration du module d'application? c'est à dire:

var myapp = angular.module('offersApp', [])
            .config(['$rootScope', function($rootScope) { }

Mais alors où dois-je charger la lib de soulignement? J'ai juste sur ma page d'index la directive ng-app et la référence de script aux libs angular-js et underscore?

index.html:

<head>
</head>
<body ng-app="offersApp">
...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="scripts/vendor/angular.js"></script>
<script src="scripts/vendor/underscore.js"></script>
...

Comment y parvenir?

javascript angularjs underscore.js Pablo
la source

bien qu'as-tu essayé et n'a pas fonctionné?

mpm

Eh bien, je ne sais pas par où commencer. Comment lier n'importe quel roi de fichiers <script> avec la partie angularjs? (contrôleurs, services, directives ... etc). Existe-t-il une expression de type "..."

Pablo

déclarez simplement la balise de script appropriée avec un trait de soulignement dans votre fichier html, comme vous l'avez fait avec angular ou jquery.

mpm

Sera-t-il disponible automatiquement sous le caractère _ ?? Comment??

Pablo

231

Lorsque vous incluez le trait de soulignement, il s'attache à l' windowobjet et est donc disponible globalement.

Vous pouvez donc l'utiliser à partir du code angulaire tel quel.

Vous pouvez également l'envelopper dans un service ou une usine, si vous souhaitez qu'il soit injecté:

var underscore = angular.module('underscore', []);
underscore.factory('_', ['$window', function($window) {
  return $window._; // assumes underscore has already been loaded on the page
}]);

Et puis vous pouvez demander le _dans le module de votre application:

// Declare it as a dependency of your module
var app = angular.module('app', ['underscore']);

// And then inject it where you need it
app.controller('Ctrl', function($scope, _) {
  // do stuff
});

sacoche
la source

27

Je ne comprends pas pourquoi vous l'injecteriez alors qu'il est déjà dans la portée de la fenêtre globale.

Walter Stabosz

36

Probablement pour les mêmes raisons que vous injectez n'importe quoi, au lieu de tout mettre dans la portée globale. Cependant, étant donné que vous êtes beaucoup moins susceptible de vouloir remplacer votre bibliothèque de traits de soulignement pendant les tests que d'autres dépendances plus spécifiques, il est compréhensible que cela ne semble pas nécessaire.

fasce.

50

c'est nécessaire lorsque vous ajoutez «use strict» à votre fichier. Puisque le trait de soulignement / lodash n'est pas défini, il lancera ReferenceError: _ n'est pas défini ... vous devez l'injecter, ou utiliser window._

Shanimal

23

Ha! Je voulais faire l'injection parce que c'est cool, merci de m'avoir donné une vraie raison, @Shanimal.

Aditya MP

10

vous voudrez peut-être également injecter _ pour le plaisir des tests. Comment feriez-vous pour amener la dépendance de soulignement dans un environnement de suite de tests

sunwukung

32

J'ai implémenté la suggestion de @ satchmorun ici: https://github.com/andresesfm/angular-underscore-module

Pour l'utiliser:

Assurez-vous d'avoir inclus underscore.js dans votre projet
```
<script src="bower_components/underscore/underscore.js">
```
Tu piges:
```
bower install angular-underscore-module
```

Ajoutez angular-underscore-module.js à votre fichier principal (index.html)

<script src="bower_components/angular-underscore-module/angular-underscore-module.js"></script>

Ajoutez le module en tant que dépendance dans la définition de votre application
```
var myapp = angular.module('MyApp', ['underscore'])
```
Pour l'utiliser, ajoutez en tant que dépendance injectée à votre contrôleur / service et il est prêt à être utilisé
```
angular.module('MyApp').controller('MyCtrl', function ($scope, _) {
...
//Use underscore
_.each(...);
...
```

unifier
la source

Ne semble pas fonctionner. Uncaught ReferenceError: _ is not defined

J'obtiens

J'ai ajouté la clarification: vous devez inclure underscore.js. Ce connecteur vous aide uniquement à l'utiliser dans un service. Voir la réponse de @ satchmorun

unifier le

31

J'utilise ceci:

var myapp = angular.module('myApp', [])
  // allow DI for use in controllers, unit tests
  .constant('_', window._)
  // use in views, ng-repeat="x in _.range(3)"
  .run(function ($rootScope) {
     $rootScope._ = window._;
  });

Voir https://github.com/angular/angular.js/wiki/Understanding-Dependency-Injection à mi-chemin pour plus d'informations sur run.

fils
la source

cela semble bon mais avez-vous un exemple? Je dois changer toutes les majuscules en majuscules sur le premier caractère uniquement en utilisant _.capitalize ()

Nate

2

Je pense que cela devrait fonctionner <p>{{ _.capitalize('lalala') }}</p>?

fils

1

@LVarayut Je ne sais pas, pourquoi ne pas l'essayer? (J'ai depuis déménagé à ReactJS)

fils

Veuillez utiliser le service à la place. Évitez d'ajouter des choses à votre $ rootScope vous aidera à avoir de meilleures performances.

Tim Hong

Je ne sais pas ce que j'ai fait de mal mais je n'ai pas pu faire fonctionner la partie "utilisation dans les vues". Mais passer le service au contrôleur puis au tpl via $ ctrl fonctionne.

Olivvv

3

Vous pouvez également jeter un oeil à ce module pour angulaire

https://github.com/floydsoft/angular-underscore

Paul Sheldrake
la source

comment chargez-vous cette chose dans un contrôleur?

chovy

3

Je m'inquiète toujours des modules qui n'ont pas été mis à jour depuis des années

Tahir Khalid

1

Si cela ne vous dérange pas d'utiliser lodash, essayez https://github.com/rockabox/ng-lodash, il enveloppe complètement lodash, c'est donc la seule dépendance et vous n'avez pas besoin de charger d'autres fichiers de script tels que lodash.

Lodash est complètement hors de la portée de la fenêtre et ne «espère» pas qu'il a été chargé avant votre module.

Nick White
la source

-2

vous pouvez utiliser ce module -> https://github.com/jiahut/ng.lodash

c'est pour lodashainsiunderscore

Jiahut
la source

1

pouvez-vous s'il vous plaît fournir des instructions d'utilisation

Paul Preibisch

Utiliser un trait de soulignement dans les contrôleurs angulaires

Réponses: