在Angular控制器中使用下划线

Pab*_*blo 125 javascript underscore.js angularjs

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

在这篇文章中:AngularJS limitTo最后2条记录 有人建议将一个_变量分配给rootScope,以便该库可供应用程序中的所有范围使用.

但我不清楚在哪里做.我的意思是应该继续app模块声明吗?即:

var myapp = angular.module('offersApp', [])
            .config(['$rootScope', function($rootScope) { }
Run Code Online (Sandbox Code Playgroud)

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

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>
...  
Run Code Online (Sandbox Code Playgroud)

我该如何实现这一目标?

sat*_*run 230

当您包含Underscore时,它会将自身附加到window对象上,因此全局可用.

因此,您可以按原样使用Angular代码.

如果您希望将其注入,您也可以将其包装在服务或工厂中:

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

然后你可以_在你的应用程序模块中询问:

// 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
});
Run Code Online (Sandbox Code Playgroud)

  • 在您的文件中添加'use strict'时必须使用它.由于未定义下划线/ lodash,它将抛出ReferenceError:_未定义...您必须注入它,或使用window._ (50认同)
  • 可能出于同样的原因你注入任何东西,而不是把所有东西都放在全球范围内.但是,由于您在测试期间不太可能想要替换下划线库而不是其他更具体的依赖项,因此可以理解它似乎没有必要. (36认同)
  • 我不明白为什么当它已经在全局窗口范围内时你会注入它. (27认同)
  • 哈!我想做注射,因为它很酷,感谢给我一个真正的理由,@ Senimal. (22认同)
  • 您可能还想为测试注入_.您将如何将下划线依赖项纳入测试套件环境中 (10认同)
  • @Shanimal尽管有许多赞成票,但你的评论是无稽之谈; `"use strict";`通过指定一个尚未用`var`声明或在可见范围内创建的名称来防止全局变量*被隐式声明*.它*不要求*访问*现有的,声明的全局变量作为`window`属性.您可以简单地将它们作为变量访问它们.为了善良,`window`*本身*是一个全局变量; 如果你所说的是真的,那么所有的全局变量都无法以任何方式进入. (8认同)
  • @Shanimal,这不是真的.它的工作原理是在严格模式下访问_(作为全局). (7认同)
  • 我同意@MichalCharemza,尽量避免在您的服务中使用全局窗口对象.上面重写为使用$ window的例子看起来或多或少是这样的:`angular.module('underscore',[]);``angular.module('underscore').factory('_',['$ window ',function($ window){return $ window._;}]);` (3认同)

uni*_*ify 32

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

要使用它:

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

    <script src="bower_components/underscore/underscore.js">
    
    Run Code Online (Sandbox Code Playgroud)
  2. 得到它:

    bower install angular-underscore-module
    
    Run Code Online (Sandbox Code Playgroud)
  3. 将angular-underscore-module.js添加到主文件(index.html)

    <script src="bower_components/angular-underscore-module/angular-underscore-module.js"></script>
    
    Run Code Online (Sandbox Code Playgroud)
  4. 在应用程序定义中将模块添加为依赖项

    var myapp = angular.module('MyApp', ['underscore'])
    
    Run Code Online (Sandbox Code Playgroud)
  5. 要使用,请将其作为注入依赖项添加到Controller/Service中,并且可以使用它

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


wir*_*res 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._;
  });
Run Code Online (Sandbox Code Playgroud)

请参阅https://github.com/angular/angular.js/wiki/Understanding-Dependency-Injection,了解更多信息run.

  • 我认为这应该可以起作用`<p> {{_ _ _ capitalize('lalala')}} </ p>` (2认同)