在 Angular 控制器中使用下划线答案

【问题标题】：Use underscore inside Angular controllers在 Angular 控制器中使用下划线
【发布时间】：2013-02-04 18:32:03
【问题描述】：

如何在 angularjs 控制器中使用下划线库？

在这篇文章中：AngularJS limitTo by last 2 records 有人建议将 _ 变量分配给 rootScope，以便该库可用于应用程序内的所有范围。

但我不清楚在哪里做。我的意思是它应该继续应用程序模块声明吗？即：

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

但是我在哪里加载下划线库？我的索引页面上只有 ng-app 指令和对 angular-js 和下划线库的脚本引用？

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>
...

我如何做到这一点？

【问题讨论】：

那么您尝试了什么但没有奏效？
好吧，我不知道从哪里开始。如何将任何
只需在 html 文件中使用下划线声明正确的脚本标签，就像使用 angular 或 jquery 一样。
在_字符下会自动可用吗？怎么样？？

标签： javascript angularjs underscore.js

【解决方案1】：

当您包含下划线时，它会将自身附加到 window 对象，因此全局可用。

因此，您可以按原样从 Angular 代码中使用它。

如果您希望注入它，您也可以将其封装在服务或工厂中：

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

然后你可以在你的应用模块中请求_：

// 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
});

【讨论】：

我不明白为什么当它已经在全局窗口范围内时你会注入它。
可能出于同样的原因，你注入任何东西，而不是把所有东西都放在全局范围内。但是，由于与其他更具体的依赖项相比，在测试期间您不太可能想要替换下划线库，因此似乎没有必要是可以理解的。
在文件中添加“use strict”时必须这样做。由于下划线/lodash 没有定义它会抛出 ReferenceError: _ is not defined... 你必须注入它，或者使用 window._
哈！我想做注射是因为它很酷，谢谢你给了我一个真正的理由，@Shanimal。
您可能还想注入 _ 以进行测试。您将如何将下划线依赖项引入测试套件环境

【解决方案2】：

我在这里实现了@satchmorun 的建议： https://github.com/andresesfm/angular-underscore-module

使用它：

确保你的项目中包含 underscore.js

<script src="bower_components/underscore/underscore.js">

得到它：

bower install angular-underscore-module

将 angular-underscore-module.js 添加到您的主文件 (index.html)

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

在您的应用定义中添加模块作为依赖项

var myapp = angular.module('MyApp', ['underscore'])

要使用，请将作为注入依赖项添加到您的 Controller/Service 中，然后就可以使用了

angular.module('MyApp').controller('MyCtrl', function ($scope, _) {
...
//Use underscore
_.each(...);
...

【讨论】：

似乎不起作用。我收到一个未定义的错误：Uncaught ReferenceError: _ is not defined
我添加了说明：您需要包含 underscore.js。此连接器仅帮助您在服务中使用它。查看@satchmorun 的回答

【解决方案3】：

我用这个：

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

请参阅https://github.com/angular/angular.js/wiki/Understanding-Dependency-Injection 大约一半以获取有关run 的更多信息。

【讨论】：

这看起来不错，但你有例子吗？我只需要使用 _.capitalize() 将第一个字符的所有大写字母更改为大写字母
我认为这应该可以<p>{{ _.capitalize('lalala') }}</p> ?
@LVarayut 我不知道，为什么不试试呢？（我后来搬到了 ReactJS）
请改用服务。避免向您的 $rootScope 添加东西将有助于您获得更好的性能。
不确定我做错了什么，但我无法让“在视图中使用”部分工作。但是将服务传递给控制器，然后通过 $ctrl 传递给 tpl 是可行的。

【解决方案4】：

你也可以看看这个模块的角度

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

【讨论】：

如何在控制器中加载这个东西？
我总是担心多年没有更新的模块

【解决方案5】：

如果您不介意使用 lodash，请尝试 https://github.com/rockabox/ng-lodash，它会完全包装 lodash，因此它是唯一的依赖项，您不需要加载任何其他脚本文件，例如 lodash。

Lodash 完全超出了窗口范围，并且没有“希望”在您的模块之前加载它。

【讨论】：

【解决方案6】：

你可以使用这个模块 -> https://github.com/jiahut/ng.lodash

这是给lodash的，underscore也是如此

【讨论】：

能否提供使用说明