Use underscore inside Angular controllers

 

How do I use underscore library inside angularjs controllers?

On this post: AngularJS limitTo by last 2 records somebody suggested to assign an _ variable to the rootScope so that the library will be available to all the scopes within the app.

But I'm not clear where to do it. I mean should it go on the app module declaration? ie: 

var myapp = angular.module('offersApp', [])
            .config(['$rootScope', function($rootScope) { }

But then where do I load underscore lib? I just have on my index page the ng-app directive and script reference to both the angular-js and underscore libs?

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

How do I achieve this?

When you include Underscore, it attaches itself to the window object, and so is available globally.

So you can use it from Angular code as-is.

You can also wrap it up in a service or a factory, if you'd like it to be injected: 

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

And then you can ask for the _ in your app's 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
});

I have implemented @satchmorun's suggestion here: https://github.com/andresesfm/angular-underscore-module

To use it:

  • Make sure you have included underscore.js in your project 

    <script src="bower_components/underscore/underscore.js">

  • Get it: 

    bower install angular-underscore-module

  • Add angular-underscore-module.js to your main file (index.html) 

    <script src="bower_components/angular-underscore-module/angular-underscore-module.js"></script>

  • Add the module as a dependency in your App definition 

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

  • To use, add as an injected dependency to your Controller/Service and it is ready to use 

    angular.module('MyApp').controller('MyCtrl', function ($scope, _) {
...
//Use underscore
_.each(...);
...

    • I use this: 

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

    See https://github.com/angular/angular.js/wiki/Understanding-Dependency-Injection about halfway for some more info on run .

    链接地址: http://www.djcxy.com/p/77890.html

    上一篇: Angularjs数据存储最佳实践

    下一篇: 在Angular控制器中使用下划线