How to make lodash work with Angular JS?
JavascriptAngularjsLodashJavascript Problem Overview
I'm trying to use lodash use it at ng-repeat directives, in this way:
<div ng-controller="GridController" ng-repeat="n in _.range(5)">
<div>Hello {{n}}</div>
</div>
Being GridController:
IndexModule.controller('GridController', function () {
this._ = _
})
However is not working and so, nothing being repeated. If I change the directive to ng-repeat="i in [1,2,3,4,5]" it'll work.
lodash is already included via <script> at <header> before angular. How can I make it work?
Javascript Solutions
Solution 1 - Javascript
I prefer to introduce '_' globally and injectable for tests, see my answer to this question https://stackoverflow.com/questions/14968297/use-underscore-inside-controllers/23984685#23984685
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._;
});
Solution 2 - Javascript
I just wanted to add some clarification to @beret's and @wires's answer. They definitely helped and got the jist of it but getting the whole process in order might suit someone. This is how I set up my angular environment with lodash and got it working with yeoman gulp-angular to serve properly
-
bower install lodash --save(This adds to bower and a saves to bower json) -
modify bower json to have lodash load before angular does. (This helps if you're using gulp inject and don't want to manually put it into index.html. otherwise put it into the index.html before the angular link)
-
Make a new constant per @wires's direction.
> 'use strict';
>
> angular.module('stackSample')
> // lodash support
> .constant('', window.);
- Inject into any angular service, filter, or controller as you would anything else:
> .filter('coffeeFilter', ['', function() {...}]);
- To throw it into some angular html view just inject it into the controller and assign a scope variable to it:
> .controller('SnesController', function ($scope, ) { > $scope. = _; > })
Hope this helps someone set up their site. :)
Solution 3 - Javascript
ng-repeat requires an Angular expression, which has access to Angular scope variables. So instead assigning _ to this, assign it to the $scope object you inject into the controller:
IndexModule.controller('GridController', function ($scope) {
$scope._ = _;
})
Solution 4 - Javascript
I am not sure what version of Angular you are using. Looks like you should have just used the 'Controller as' syntax when you use 'this' to access variables in the dom.
Here is the solution with this and not using scope. 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>