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?
I prefer to introduce '_' globally and injectable for tests, see my answer to this question Use underscore inside controllers
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._;
});
window._ is referenced by the $rootScope? Doesn't it make unnecessary the constant? On the other way, shouldn't an explicit $inject reference be preferred than using an attribute on the angular-wise-global $rootscope?
.factory('_', function($window) { return $window._; // assumes underscore has already been loaded on the page })
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._);
.filter('coffeeFilter', ['_', function(_) {...}]);
.controller('SnesController', function ($scope, _) { $scope._ = _; })
Hope this helps someone set up their site. :)
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._ = _;
})
controller as syntax.controler as syntaxI 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>
