web-dev-qa-db-ja.com

lodashをAngular JSで動作させる方法は？

私はlodashをng-repeatディレクティブで次のように使用しようとしています：

<div ng-controller="GridController" ng-repeat="n in _.range(5)">
    <div>Hello {{n}}</div>
</div>

GridControllerであること：

IndexModule.controller('GridController', function () {

this._ = _

})

ただし、機能していないため、repeatedにはなりません。ディレクティブをng-repeat="i in [1,2,3,4,5]"に変更すると機能します。

lodashは、angularの前の<script>で<header>を介して既に含まれています。どうすればそれを機能させることができますか？

javascriptangularjslodash
65
diegoaguilar

私は '_'をグローバルに導入し、テストのために注入可能にすることを好みます。この質問に対する私の答えを参照してください コントローラー内でアンダースコアを使用

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

@beretと@wiresの答えに明確化を加えたかっただけです。彼らは間違いなくその助けを手に入れたが、プロセス全体を整頓することは誰かに合うかもしれない。これは、lodashでangular環境を設定し、正しく動作するようにyeoman gulp-angularで動作させる方法です。

  • bower install lodash --save（これはbowerに追加され、bower jsonに保存されます）

  • バウアーjsonを変更して、angularが実行される前にlodashをロードします。 （これは、gulp injectを使用していて、index.htmlに手動で配置したくない場合に役立ちます。そうでない場合は、index.htmlのangularリンクの前に配置します）

  • @wiresの方向ごとに新しい定数を作成します。

'use strict';

angular.module('stackSample')
  // lodash support
  .constant('_', window._);
  • 他の場合と同様に、angularサービス、フィルター、またはコントローラーに挿入します。
.filter('coffeeFilter', ['_', function(_) {...}]);
  • それをいくつかのangular htmlビューにスローするには、それをコントローラーに挿入し、スコープ変数を割り当てます。
.controller('SnesController', function ($scope, _) {
  $scope._ = _;
})

これがサイトのセットアップに役立つことを願っています。 :)

57
ThinkBonobo

ng-repeatには、Angularスコープ変数にアクセスできるAngular式が必要です。したがって、代わりに_をthisに割り当て、コントローラーに挿入する$scopeオブジェクトに割り当てます。

IndexModule.controller('GridController', function ($scope) {
  $scope._ = _;
})

デモ

29
Marc Kline

使用しているAngularのバージョンがわかりません。 「this」を使用してdom内の変数にアクセスする場合は、「Controller as」構文を使用する必要があります。

これは、スコープを使用せずにこれを使用したソリューションです。 http://plnkr.co/edit/9IybWRrBhlgQAOdAc6fs?p=info

 <body ng-app="myApp" ng-controller="GridController as grid">
      <div ng-repeat="n in grid._.range(5)">
      <div>Hello {{n}}</div>
    </div>
  </body>
2
magizh