在 Angular 控制器中使用下划线

IT技术 javascript angularjs underscore.js
2021-02-24 10:46:50

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

在这篇文章中:AngularJS limitTo by last 2 记录 有人建议为 rootScope 分配一个 _ 变量,以便该库可用于应用程序中的所有范围。

但我不清楚在哪里做。我的意思是它应该放在应用程序module声明中吗?IE:

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

我如何实现这一目标?

6个回答

当您包含 Underscore 时,它​​会将自身附加到window对象上,因此在全局范围内可用。

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

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

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

然后你可以_在你的应用程序的module中请求

// 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
});
您可能还想注入 _ 以进行测试。您将如何将下划线依赖项引入测试套件环境中
2021-04-23 10:46:50
我不明白为什么当它已经在全局窗口范围内时你会注入它。
2021-04-30 10:46:50
哈!我想做注射,因为它很酷,谢谢你给我一个真正的理由,@Sanimal。
2021-05-03 10:46:50
可能出于相同的原因,您注入任何内容,而不是将所有内容都放在全局范围内。但是,由于与其他一些更具体的依赖项相比,在测试期间您不太可能想要替换下划线库,因此它似乎没有必要是可以理解的。
2021-05-18 10:46:50
当您向文件中添加“使用严格”时,这是必要的。由于未定义下划线/lodash,它会抛出 ReferenceError: _ is not defined... 你必须注入它,或者使用 window._
2021-05-20 10:46:50

我在这里实施了@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 定义中添加module作为依赖项

    var myapp = angular.module('MyApp', ['underscore'])
    
  5. 要使用,将作为注入的依赖项添加到您的控制器/服务中,它就可以使用了

    angular.module('MyApp').controller('MyCtrl', function ($scope, _) {
    ...
    //Use underscore
    _.each(...);
    ...
    
似乎不起作用。我收到一个未定义的错误:Uncaught ReferenceError: _ is not defined
2021-05-17 10:46:50
我添加了说明:您需要包含 underscore.js。此连接器仅帮助您在服务中使用它。见@satchmorun 的回答
2021-05-19 10:46:50

我用这个:

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() 将第一个字符的所有大写更改为大写
2021-04-26 10:46:50
不知道我做错了什么,但我无法让“在视图中使用”部分起作用。但是将服务传递给控制器​​,然后通过 $ctrl 传递给 tpl 是有效的。
2021-04-27 10:46:50
请改用服务。避免向您的 $rootScope 添加内容将有助于您获得更好的性能。
2021-05-04 10:46:50
@LVarayut 我不知道,为什么不试试呢?(我后来搬到了 ReactJS)
2021-05-12 10:46:50
我认为这应该有效<p>{{ _.capitalize('lalala') }}</p>吗?
2021-05-18 10:46:50

你也可以看看这个module的角度

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

我总是担心多年没有更新的module
2021-05-12 10:46:50
你如何在控制器中加载这个东西?
2021-05-20 10:46:50

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

Lodash 完全脱离了窗口作用域,并且“不希望”它在你的module之前被加载。