Verwenden Sie einen Unterstrich in Angular Controllern

126

Wie verwende ich die Unterstrichbibliothek in AngularJS-Controllern?

In diesem Beitrag: AngularJS limitTo bis zu den letzten 2 Datensätzen hat jemand vorgeschlagen, dem rootScope eine _ -Variable zuzuweisen, damit die Bibliothek allen Bereichen in der App zur Verfügung steht.

Aber mir ist nicht klar, wo ich es machen soll. Ich meine, sollte es auf der App-Modul-Deklaration stehen? dh:

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

Aber wo lade ich dann den Unterstrich lib? Ich habe nur auf meiner Indexseite die ng-App-Direktive und den Skriptverweis sowohl auf die Angular-Js als auch auf die Unterstrich-Bibliotheken.

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

Wie erreiche ich das?

javascript angularjs underscore.js Pablo
quelle

Nun, was hast du versucht und hat nicht funktioniert?

mpm

Ich weiß nicht, wo ich anfangen soll. Wie verknüpfe ich einen König von <script> -Dateien mit dem anglejs-Teil? (Controller, Dienste, Richtlinien ... usw.). Gibt es einen erforderlichen ('...') ähnlichen Ausdruck?

Pablo

Deklarieren Sie einfach das richtige Skript-Tag mit Unterstrich in Ihrer HTML-Datei, wie Sie es mit Angular oder JQuery getan haben.

mpm

Wird es automatisch unter dem Zeichen _ verfügbar sein? Wie??

Pablo

231

Wenn Sie einen Unterstrich einfügen, hängt er sich an das windowObjekt an und ist daher global verfügbar.

Sie können es also unverändert aus Angular-Code verwenden.

Sie können es auch in einem Service oder einer Fabrik einpacken, wenn Sie möchten, dass es injiziert wird:

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

Und dann können _Sie im Modul Ihrer App nach dem fragen :

// 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
quelle

27

Ich verstehe nicht, warum Sie es injizieren würden, wenn es sich bereits im globalen Fensterbereich befindet.

Walter Stabosz

36

Wahrscheinlich aus den gleichen Gründen injizieren Sie etwas, anstatt alles in den globalen Bereich zu stellen. Da es jedoch weniger wahrscheinlich ist, dass Sie Ihre Unterstrichbibliothek während des Testens ersetzen möchten als bei einer anderen spezifischeren Abhängigkeit, ist es verständlich, dass dies nicht erforderlich erscheint.

Fess.

50

Dies ist erforderlich, wenn Sie Ihrer Datei "use strict" hinzufügen. Da Unterstrich / lodash nicht definiert ist, wird ReferenceError ausgelöst: _ ist nicht definiert ... Sie müssen ihn injizieren oder window._ verwenden

Shanimal

23

Ha! Ich wollte das Spritzen machen, weil es cool ist, danke, dass du mir einen echten Grund gegeben hast, @Shanimal.

Aditya MP

10

Vielleicht möchten Sie zum Testen auch _ injizieren. Wie würden Sie

vorgehen

32

Ich habe den Vorschlag von @ satchmorun hier umgesetzt: https://github.com/andresesfm/angular-underscore-module

Um es zu benutzen:

Stellen Sie sicher, dass Sie underscore.js in Ihr Projekt aufgenommen haben
```
<script src="bower_components/underscore/underscore.js">
```
Kapiert:
```
bower install angular-underscore-module
```

Fügen Sie Ihrer Hauptdatei (index.html) angle-underscore-module.js hinzu.

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

Fügen Sie das Modul als Abhängigkeit in Ihre App-Definition ein
```
var myapp = angular.module('MyApp', ['underscore'])
```
Fügen Sie Ihrem Controller / Service als injizierte Abhängigkeit eine injizierte Abhängigkeit hinzu, und er ist einsatzbereit
```
angular.module('MyApp').controller('MyCtrl', function ($scope, _) {
...
//Use underscore
_.each(...);
...
```

vereinheitlichen
quelle

Scheint nicht zu funktionieren. Ich bekomme einen undefinierten Fehler:Uncaught ReferenceError: _ is not defined

Chovy

Ich habe die Klarstellung hinzugefügt: Sie müssen underscore.js einfügen. Dieser Anschluss hilft Ihnen nur bei der Verwendung in einem Dienst. Siehe @ satchmoruns Antwort

vereinheitlichen Sie den

31

Ich benutze das:

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

Weitere Informationen zu finden Sie unter https://github.com/angular/angular.js/wiki/Understanding-Dependency-Injectionrun .

Drähte
quelle

das sieht gut aus, aber hast du ein Beispiel? Ich muss alle Großbuchstaben auf dem ersten Zeichen nur mit _.capitalize ()

Nate

2

Ich denke das sollte funktionieren <p>{{ _.capitalize('lalala') }}</p>?

Drähte

1

@LVarayut Ich weiß nicht, warum nicht versuchen? (Ich bin seitdem zu ReactJS umgezogen)

Drähte

Bitte nutzen Sie stattdessen den Service. Vermeiden Sie das Hinzufügen von Inhalten zu Ihrem $ rootScope, um eine bessere Leistung zu erzielen.

Tim Hong

Ich bin mir nicht sicher, was ich falsch gemacht habe, aber ich konnte den Teil "Verwendung in Ansichten" nicht zum Laufen bringen. Die Übergabe des Dienstes an den Controller und dann an den tpl über $ ctrl funktioniert jedoch.

Olivvv

3

Sie können sich dieses Modul auch für Winkel ansehen

https://github.com/floydsoft/angular-underscore

Paul Sheldrake
quelle

Wie lädt man dieses Ding in einen Controller?

Chovy

3

Ich mache mir immer Sorgen um Module, die seit Jahren nicht mehr aktualisiert wurden

Tahir Khalid

1

Wenn es Ihnen nichts ausmacht, lodash zu verwenden, probieren Sie https://github.com/rockabox/ng-lodash aus. Es umschließt lodash vollständig, sodass es die einzige Abhängigkeit ist und Sie keine anderen Skriptdateien wie lodash laden müssen.

Lodash ist völlig außerhalb des Fensterbereichs und keine "Hoffnung", dass es vor Ihrem Modul geladen wurde.

Nick White
quelle

-2

Sie können dieses Modul verwenden -> https://github.com/jiahut/ng.lodash

das ist für lodashso tutunderscore

jiahut
quelle

1

Können Sie bitte Gebrauchsanweisungen geben

Paul Preibisch

Verwenden Sie einen Unterstrich in Angular Controllern

Antworten: