Angularコントローラー内でアンダースコアを使用する

126

angularjsコントローラー内でアンダースコアライブラリを使用するにはどうすればよいですか？

この投稿：AngularJS limitTo by last 2 records 誰かが_変数を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 
— パブロ
ソース
まあ何をしようとしてうまくいかなかったのですか？
— mpm
さて、どこから始めればいいのかわかりません。<script>ファイルのキングをangularjsパーツにリンクするにはどうすればよいですか？（コントローラー、サービス、ディレクティブなど）。require（ '...'）のような表現はありますか？
— パブロ
angularまたはjqueryで行ったように、htmlファイルでアンダースコアを使用して適切なスクリプトタグを宣言するだけです。
— mpm
_文字の下で自動的に使用できますか？どうやって？？
— Pablo

回答:

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
});
— サッチモラン
ソース
27
すでにグローバルウィンドウスコープにあるのに、なぜそれを注入するのかわかりません。
— Walter Stabosz 2013
36
おそらく同じ理由で、すべてをグローバルスコープに入れるのではなく、何かを注入します。ただし、他の特定の依存関係に比べて、テスト中に下線ライブラリを置き換えたいと思う可能性ははるかに低いため、必要がないように思えることは理解できます。
— フェス。
50
ファイルに 'use strict'を追加するときに必要です。_が定義されていない...あなたはそれを注入する必要があり、または使用window._：アンダースコア/ lodashは、それがにReferenceErrorがスローされます定義されていないので、
— Shanimal
23
ハ！インジェクションをやりたかったのはクールだからです。本当の理由を教えてくれてありがとう。
— Aditya MP
10
また、テストのために_を注入することもできます。アンダースコアの依存関係をテストスイート環境に
— どのように取り入れ
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. モジュールを依存関係としてアプリ定義に追加します

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

  5. 使用するには、注入された依存関係としてコントローラー/サービスに追加すると、すぐに使用できます

    angular.module('MyApp').controller('MyCtrl', function ($scope, _) {
...
//Use underscore
_.each(...);
...
— 統一する
ソース
動作していないようです。未定義のエラーが発生します：Uncaught ReferenceError: _ is not defined
— 不安定な
明確化を追加しました：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。

— ワイヤー
ソース
これはよさそうですが、例はありますか？_.capitalize（）を使用して最初の文字のみをすべて大文字に変更する必要があります
— Nate
2
これはうまくいくと思います<p>{{ _.capitalize('lalala') }}</p>か？
— ワイヤ
1
@LVarayutわからない、やってみませんか？（ReactJSに移動するので、私が持っている）
— ワイヤ
代わりにサービスを使用してください。$ rootScopeにデータを追加しないようにすると、パフォーマンスが向上します。
— Tim Hong
何が悪いのかわかりませんが、「ビューでの使用」の部分を機能させることができませんでした。しかし、サービスをコントローラーに渡し、次に$ ctrlを介してtplに渡すことは機能します。
— Olivvv 2017
1

lodashを使用してもかまわない場合は、https： //github.com/rockabox/ng-lodashを試してみてください。lodashは完全にラップされるため、依存関係のみであり、lodashなどの他のスクリプトファイルをロードする必要はありません。

Lodashはウィンドウスコープから完全に外れており、モジュールの前に読み込まれることを望んでいません。

— ニック・ホワイト
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.