web-dev-qa-db-fra.com

Comment faire fonctionner lodash avec Angular JS?

J'essaie d'utiliser lodash, utilisez-le à ng-repeat directives, de cette façon:

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

Être GridController:

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

this._ = _

})

Cependant, cela ne fonctionne pas et donc, rien ne se répète . Si je change la directive en ng-repeat="i in [1,2,3,4,5]" ça va marcher.

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

javascriptangularjslodash
65
diegoaguilar

Je préfère introduire '_' globalement et injectable pour les tests, voir ma réponse à cette question tiliser un trait de soulignement dans les contrôleurs

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._;
  });
109
wires

Je voulais juste ajouter quelques éclaircissements à la réponse de @ beret et @ wire. Ils ont certainement aidé et obtenu le résultat, mais mettre tout le processus en ordre pourrait convenir à quelqu'un. C’est ainsi que j’ai configuré mon environnement angular avec lodash et que je l’ai fonctionné avec yeoman gulp-angular pour servir correctement

  • bower install lodash --save _ (Cela ajoute à bower et enregistre à bower json)

  • modifier bower json pour avoir la charge lodash avant angular fait. (Cela aide si vous utilisez gulp inject et ne voulez pas le mettre manuellement dans index.html. sinon, mettez-le dans l'index .html avant le angular angulaire)

  • Faire une nouvelle constante par @ direction des fils.

'use strict';

angular.module('stackSample')
  // lodash support
  .constant('_', window._);
  • Injectez dans n’importe quel service, filtre ou contrôleur angular):
.filter('coffeeFilter', ['_', function(_) {...}]);
  • Pour le jeter dans une vue angular html, il suffit de l'injecter dans le contrôleur et de lui affecter une variable de portée:
.controller('SnesController', function ($scope, _) {
  $scope._ = _;
})

J'espère que cela aide quelqu'un à configurer son site. :)

57
ThinkBonobo

ng-repeat nécessite une expression Angular, qui a accès aux variables Angular. Par conséquent, affectez plutôt _ à this, assignez-le à la $scope objet que vous injectez dans le contrôleur:

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

démo

29
Marc Kline

Je ne suis pas sûr de la version de Angular que vous utilisez. On dirait que vous auriez dû utiliser la syntaxe 'Controller as' lorsque vous utilisez 'this' pour accéder aux variables du dom.

Voici la solution avec cela et ne pas utiliser la portée. 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
magizh