Comment faire pour que lodash fonctionne avec Angular JS?

j'essaie d'utiliser lodash utilisez-le dans les directives ng-repeat , de cette façon:

<div ng-controller="GridController" ng-repeat="n in _.range(5)">
    <div>Hello {{n}}</div>
</div>

étant GridController :

IndexModule.controller('GridController', function () {

this._ = _

})

cependant ne fonctionne pas et donc, rien étant répété . Si je change la directive en 151940920, ça marchera.

lodash est déjà inclus via <script> à <header> avant angular . Comment puis-je le faire fonctionner?

63
demandé sur diegoaguilar 2014-05-26 07:01:47

4 réponses

je préfère créer des " _ " a l'échelle mondiale, et injectables pour les tests, voir ma réponse à cette question utiliser des commandes de soulignement intérieures

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._;
  });
108
répondu wires 2014-08-01 18:01:57

je voulais juste apporter quelques précisions à la réponse de @beret et @wires. Ils ont certainement aidé et obtenu l'essentiel de celui-ci, mais obtenir l'ensemble du processus dans l'ordre pourrait convenir à quelqu'un. C'est ainsi que j'ai mis en place mon environnement angulaire avec lodash et que je l'ai fait travailler avec yeoman gulp-angular pour servir correctement

  • bower install lodash --save (cela ajoute à bower et un sauve à bower json)

  • modifier bower json pour avoir lodash charge avant angulaire. (Cela aide si vous utilisez gulfp injecter et ne veulent pas mettre manuellement dans l'index.HTML. sinon le mettre dans l'index.html avant de l'angle de lien)

  • faire une nouvelle constante per @wires direction.

'use strict';

angular.module('stackSample')
  // lodash support
  .constant('_', window._);
  • injecter dans n'importe quel service angulaire, filtre, ou contrôleur comme vous le feriez n'importe quoi d'autre:
.filter('coffeeFilter', ['_', function(_) {...}]);
  • pour le jeter dans une vue HTML angulaire il suffit de l'injecter dans le contrôleur et lui assigner une variable scope:
.controller('SnesController', function ($scope, _) {
  $scope._ = _;
})

espérons que cela aide quelqu'un à mettre en place leur site. :)

55
répondu ThinkBonobo 2016-09-22 23:00:14

ng-repeat nécessite une expression angulaire, qui a accès à des variables angulaires de portée. Donc à la place de _ à this , assignez-le à l'objet $scope que vous injectez dans le contrôleur:

IndexModule.controller('GridController', function ($scope) {
  $scope._ = _;
})

Démo

29
répondu Marc Kline 2014-05-26 03:42:06

Je ne suis pas sûr de la version de L'angle que vous utilisez. On dirait que vous auriez dû juste utiliser la syntaxe 'Controller as' lorsque vous utilisez 'ceci' pour accéder aux variables dans le dom.

Voici la solution avec ceci et sans utiliser scope. http://plnkr.co/edit/9IybWRrBhlgQAOdAc6fs?p=info

 <body ng-app="myApp" ng-controller="GridController as grid">
      <div ng-repeat="n in grid._.range(5)">
      <div>Hello {{n}}</div>
    </div>
  </body>
2
répondu magizh 2015-09-11 01:41:33