如何使 lodash 与 Angular JS 一起工作？答案

【问题标题】：How to make lodash work with Angular JS?如何使 lodash 与 Angular JS 一起工作？
【发布时间】：2014-07-14 18:06:55
【问题描述】：

我正在尝试使用 lodash 在ng-repeat 指令处使用它，以这种方式：

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

成为GridController:

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

this._ = _

})

但是没有工作，因此没有任何内容重复。如果我将指令更改为ng-repeat="i in [1,2,3,4,5]"，它将起作用。

lodash 已通过 <script> 包含在 angular 之前的 <header>。我怎样才能让它发挥作用？

【问题讨论】：

标签： javascript angularjs lodash

【解决方案1】：

我更喜欢在全局范围内引入“_”并且可用于测试，请参阅我对这个问题的回答 Use underscore inside controllers

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

【讨论】：

“_”是否也可以在隔离范围内使用？
我不明白...常量已定义，但随后$rootScope 引用了“全局”下划线实例window._？它不会使常数变得不必要吗？另一方面，明确的$inject 引用不应该比在角度全局$rootscope 上使用属性更可取吗？
用$window代替window不是更好吗？
是的，这就是我使用的，我创建了一个名为 '_' 的服务并将它注入到我需要它的每个控制器中：.factory('_', function($window) { return $window._; // assumes underscore has already been loaded on the page })
美丽。正是我需要在 ng-template 中使用 lodash。

【解决方案2】：

我只是想对@beret 和@wires 的回答进行一些澄清。他们确实提供了帮助并掌握了要点，但按顺序完成整个过程可能适合某人。这就是我使用 lodash 设置我的角度环境并让它与 yeoman gulp-angular 一起工作以正常服务的方式

bower install lodash --save（这会添加到 bower 并保存到 bower json）
修改 bower json 以在 angular 之前加载 lodash。（如果您使用 gulp injection 并且不想手动将其放入 index.html 中，这会有所帮助。否则将其放入 index.html 中的角度链接之前）
根据@wires 的方向创建一个新常量。

'use strict';

angular.module('stackSample')
  // lodash support
  .constant('_', window._);

像其他任何东西一样注入到任何 Angular 服务、过滤器或控制器中：

.filter('coffeeFilter', ['_', function(_) {...}]);

要将其放入一些有角度的 html 视图中，只需将其注入控制器并为其分配一个范围变量：

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

希望这有助于有人设置他们的网站。 :)

【讨论】：

有人把它做成了一个模块：github.com/kmc059000/angular-lodash-module 现在，你可以安装它了。
我之前看到过这个建议，这绝对是一个很好的建议，但我仍然更喜欢我拥有它的小型“手动”方式，因为这样我就不必依赖模块维护者来保持使用最新的 lodash。也就是说，我认为有一些奇怪的边缘情况，我建议的方式不起作用，在这种情况下，请使用模块。
查看它的代码，跟上最新的 lodash 不会是问题，因为它的 bower.json 将 lodash 设置为最新版本。但是将特定的 lodash 版本设置为依赖项是一个问题。
@ThinkBonobo 我只是想确保我在这里得到了东西。在您的控制器示例中，您实际上没有注入 lodash，对吧？还是我错过了什么。
老而金！我认为这应该是答案，因为它是完整且逐步的。对我来说效果很好。

【解决方案3】：

ng-repeat 需要一个 Angular 表达式，它可以访问 Angular 范围变量。因此，将_ 分配给this，而是将其分配给您注入控制器的$scope 对象：

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

Demo

【讨论】：

差不多，是的，除非您打算使用 controller as 语法。
始终使用controler as 语法

【解决方案4】：

我不确定您使用的是哪个版本的 Angular。当您使用 'this' 访问 dom 中的变量时，看起来您应该刚刚使用了 'Controller as' 语法。

这是使用此而不使用范围的解决方案。 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>

【讨论】：