如何让lodash与Angular JS配合使用？

Question

如何让lodash与Angular JS配合使用？

67

我正在尝试在ng-repeat指令中使用lodash，方法如下：

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

成为GridController：

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

this._ = _

})

然而，repeated没有被重复，因此不起作用。如果我将指令更改为ng-repeat="i in [1,2,3,4,5]"，它会起作用。

lodash已经通过<header>中的<script>在angular之前包含进来。我该如何使它起作用？

- diegoaguilar

4个回答

61

我只是想对@beret和@wires的答案进行一些澄清。他们确实有所帮助并掌握了要点，但按顺序了解整个过程可能更适合某些人。这就是我如何使用lodash设置我的angular环境，并使用yeoman gulp-angular使其正确运行的方法：

bower install lodash --save（这将添加到bower并保存到bower json）
修改bower json以在angular之前加载lodash。（如果您正在使用gulp inject并且不想手动将其放入index.html，则可以这样做。否则，请在angular链接之前将其放入index.html中）
根据@wires的指示创建一个新的常量。

'use strict';

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

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

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

要将它放入某个Angular HTML视图中，只需将其注入控制器并将作用域变量分配给它：

将其注入控制器并将作用域变量分配给它即可在某个 Angular HTML 视图中呈现。

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

希望这能帮助某人设置他们的网站。 :)

- ThinkBonobo

有人将它制作成了一个模块：https://github.com/kmc059000/angular-lodash-module现在，你可以使用 bower 安装它。 - jgomo3

1

我之前看到过这个建议，确实是一个好主意，但我仍然更喜欢我现在的微小“手动”方式，因为这样我就不必依赖于模块维护者来跟上最新的lodash。话虽如此，我认为有一些奇怪的边缘情况，我的建议可能行不通，在那种情况下，可以选择使用该模块。 - ThinkBonobo

1

审查它的代码，跟上最新的lodash不是问题，因为它的bower.json将lodash设置为最新版本。但是将特定的lodash版本设置为依赖项是一个问题。 - jgomo3

1

@ThinkBonobo 我只是想确保我理解得正确。在你的控制器示例中，你实际上没有注入lodash，是吗？还是我漏了什么。 - defaultcheckbox

1

老而弥坚！我认为这应该是答案，因为它是完整的、一步一步的。对我来说效果很好。 - ramires.cabral

29

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

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

演示

- Marc Kline

4

基本上是这样的，除非你计划使用“controller as”语法。 - Marc Kline

7

始终使用 controller as 语法。 - Gerardo Lima

2

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

这里是使用“this”而不使用$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>

- magizh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- wires · Accepted Answer

我更喜欢在测试中全局引入 '_' 和可注入的方式，详见我在这个问题的回答 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._;
  });