Utilizzare il trattino basso all'interno dei controller angolari

126

Come si usa la libreria di sottolineatura all'interno dei controller angularjs?

In questo post: AngularJS limitTo negli ultimi 2 record qualcuno ha suggerito di assegnare una _ variabile a rootScope in modo che la libreria sia disponibile per tutti gli ambiti all'interno dell'app.

Ma non sono chiaro dove farlo. Voglio dire, dovrebbe andare sulla dichiarazione del modulo app? vale a dire:

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

Ma allora dove carico la sottolineatura lib? Ho solo sulla mia pagina indice la direttiva ng-app e il riferimento allo script sia per le librerie angular-js che per quelle underscore?

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

Come posso raggiungere questo obiettivo?

javascript  angularjs  underscore.js 
— Pablo
fonte
bene cosa hai provato e non ha funzionato?
— mpm,
Beh, non so da dove cominciare. Come posso collegare qualsiasi re dei file <script> con la parte angularjs? (controllori, servizi, direttive ... ecc.). C'è qualche richiesta ('...') come espressione?
— Pablo,
dichiara semplicemente il tag di script corretto con trattino basso nel tuo file html, come hai fatto con angular o jquery.
— mpm,
Sarà disponibile automaticamente sotto il carattere _ ?? Come??
— Pablo,

Risposte:

231

Quando includi Underscore, si attacca windowall'oggetto e quindi è disponibile a livello globale.

Quindi puoi usarlo dal codice angolare così com'è.

Puoi anche avvolgerlo in un servizio o in una fabbrica, se desideri che venga iniettato:

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

E poi puoi chiedere _nel modulo della tua app:

// 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
});
— satchmorun
fonte
27
Non capisco perché lo si inietti quando è già nell'ambito della finestra globale.
— Walter Stabosz,
36
Probabilmente per le stesse ragioni per cui si inietta qualcosa, invece di mettere tutto nell'ambito globale. Tuttavia, poiché è molto meno probabile che si desideri sostituire la libreria di sottolineatura durante il test rispetto ad altre dipendenze più specifiche, è comprensibile che non sembri necessario.
— Fess.
50
è necessario quando aggiungi "usa rigoroso" al tuo file. Poiché il carattere di sottolineatura / lodash non è definito, verrà generato ReferenceError: _ non è definito ... è necessario iniettarlo o utilizzare window._
— Shanimal
23
Ha! Volevo fare l'iniezione perché è bello, grazie per avermi dato un vero motivo, @Shanimal.
— MP Aditya,
10
potresti anche voler iniettare _ per motivi di test. Come faresti a portare la dipendenza del trattino basso in un ambiente di test suite
— sunwukung,
32

Ho implementato il suggerimento di @ satchmorun qui: https://github.com/andresesfm/angular-underscore-module

Per usarlo:

  1. Assicurati di aver incluso underscore.js nel tuo progetto

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

  2. Prendilo:

    bower install angular-underscore-module

  3. Aggiungi angular-underscore-module.js al tuo file principale (index.html)

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

  4. Aggiungi il modulo come dipendenza nella definizione della tua app

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

  5. Per usare, aggiungi come dipendenza iniettata al tuo Controller / Servizio ed è pronto per l'uso

    angular.module('MyApp').controller('MyCtrl', function ($scope, _) {
...
//Use underscore
_.each(...);
...
— unificare
fonte
Non sembra funzionare. Ottengo un errore indefinito:Uncaught ReferenceError: _ is not defined
— chovy
Ho aggiunto il chiarimento: è necessario includere underscore.js. Questo connettore consente solo di utilizzarlo in un servizio. Vedere @ risposta di satchmorun
— Unificare
31

Io lo uso questo:

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

Vedi https://github.com/angular/angular.js/wiki/Understanding-Dependency-Injection circa a metà strada per ulteriori informazioni su run.

— fili
fonte
sembra buono ma hai un esempio? Devo cambiare tutto maiuscolo in maiuscolo sul primo carattere solo usando _.capitalize ()
— Nate
2
Penso che dovrebbe funzionare <p>{{ _.capitalize('lalala') }}</p>?
— fili
1
@Larayut Non lo so, perché non provarlo? (Da allora ho trasferito a ReactJS)
— fili
Si prega di utilizzare il servizio invece. Evitare di aggiungere elementi a $ rootScope ti aiuterà ad avere prestazioni migliori.
— Tim Hong
Non sono sicuro di cosa ho fatto di sbagliato, ma non sono riuscito a far funzionare la parte "uso nelle viste". Ma passare il servizio al controller e quindi al tpl tramite $ ctrl funziona.
— Olivvv,
1

Se non ti dispiace usare lodash, prova https://github.com/rockabox/ng-lodash che avvolge completamente lodash, quindi è l'unica dipendenza e non è necessario caricare altri file di script come lodash.

Lodash è completamente fuori dall'ambito della finestra e non "spera" che sia stato caricato prima del modulo.

— Nick White
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.