在Angular控制器中使用下划线

126

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

在此文章上：AngularJS limitTo的最后2条记录 建议有人为rootScope分配一个_变量，以便该库可用于应用程序中的所有范围。

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

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

但是，我该在哪里加载下划线lib？我的索引页面上只有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>
...

我该如何实现？

javascript  angularjs  underscore.js 
— 巴勃罗
source
那么，您尝试了什么却没有成功？
— mpm
好吧，我不知道从哪里开始。如何将<script>文件的任何国王与angularjs部分链接？（控制器，服务，指令等）。是否有任何require（'...'）之类的表达式？
— Pablo
只需在html文件中用下划线声明正确的脚本标签，就像使用angular或jquery一样。
— MPM
可以在_字符下自动使用吗？怎么样？？
— 巴勃罗

Answers:

231

当您包含Underscore时，它会将自己附加到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
});
— Satchmorun
source
27
我不明白为什么当它已经在全局窗口范围内时会注入它。
— Walter Stabosz
36
出于相同的原因，您可能注入了任何内容，而不是将所有内容放入全局范围。但是，由于与其他更具体的依赖关系相比，在测试过程中您不太希望替换下划线库，因此似乎没有必要，这是可以理解的。
— fess。
50
当您在文件中添加“使用严格”时，这是必要的。由于未定义下划线/破折号，因此将引发ReferenceError：_未定义...您必须注入它，或使用window._
— Shanimal 2013年
23
哈！我想进行注射，因为它很酷，感谢您给我一个真正的理由，@ Shanimal。
— Aditya MP
10
您可能还想注入_以便进行测试。您将如何将下划线依赖项引入测试套件环境中
— sunwukung 2013年
32

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

要使用它：

  1. 确保在项目中包含了underscore.js

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

  2. 得到它：

    bower install angular-underscore-module

  3. 将angular-underscore-module.js添加到您的主文件（index.html）

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

  4. 将模块作为依赖项添加到您的App定义中

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

  5. 要使用，请将其作为注入依赖项添加到控制器/服务中，即可使用

    angular.module('MyApp').controller('MyCtrl', function ($scope, _) {
...
//Use underscore
_.each(...);
...
— 统一
source
似乎不起作用。我收到一个未定义的错误：Uncaught ReferenceError: _ is not defined
— chovy 2014年
我添加了说明：您需要包括underscore.js。此连接器仅帮助您在服务中使用它。参见@satchmorun的答案
— 统一
31

我用这个：

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。

— 电线
source
这看起来不错，但您有例子吗？我需要全部大写改为上的第一个字符只能用_.capitalize（）
— 奈特
2
我认为这应该工作<p>{{ _.capitalize('lalala') }}</p>吗？
— 布线
1
@LVarayut我不知道，为什么不尝试呢？（从那以后我就搬到了ReactJS）
— 连线
请改为使用服务。避免在$ rootScope中添加内容可以帮助您获得更好的性能。
— 蒂姆·洪
不知道我做错了什么，但是我无法使“在视图中使用”部分起作用。但是可以通过$ ctrl将服务传递给控制器​​，然后传递给tpl。
— Olivvv
1

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

Lodash完全不在窗口范围之内，并且没有“希望”在模块之前已加载。

— 尼克·怀特
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.