Gunakan garis bawah di dalam pengontrol sudut

126

Bagaimana cara menggunakan pustaka garis bawah di dalam pengontrol angularjs?

Pada posting ini: AngularJS limitTo pada 2 record terakhir seseorang menyarankan untuk menetapkan variabel _ ke rootScope sehingga perpustakaan akan tersedia untuk semua cakupan dalam aplikasi.

Tapi saya tidak jelas di mana harus melakukannya. Maksud saya harusnya pergi pada deklarasi modul aplikasi? yaitu:

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

Tapi lalu di mana saya memuat garis bawah lib? Saya hanya punya di halaman indeks saya direktif aplikasi-ng dan referensi skrip untuk kedua sudut-js dan garis bawah 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>
...

Bagaimana saya mencapai ini?

javascript  angularjs  underscore.js 
— Pablo
sumber
baik apa yang Anda coba dan tidak berhasil?
— mpm
Saya tidak tahu harus mulai dari mana. Bagaimana cara menautkan raja mana pun dari file <script> dengan bagian angularjs? (pengontrol, layanan, arahan ... dll). Apakah ada yang membutuhkan ('...') ekspresi seperti?
— Pablo
cukup deklarasikan tag skrip yang tepat dengan garis bawah pada file html Anda, seperti yang Anda lakukan dengan sudut atau jquery.
— mpm
Apakah akan tersedia secara otomatis di bawah karakter _ ?? Bagaimana??
— Pablo

Jawaban:

231

Ketika Anda memasukkan Garis Bawah, itu melampirkan dirinya sendiri ke windowobjek, dan tersedia secara global.

Jadi Anda bisa menggunakannya dari kode Angular apa adanya.

Anda juga dapat membungkusnya dalam layanan atau pabrik, jika Anda ingin itu disuntikkan:

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

Dan kemudian Anda dapat meminta di _dalam modul aplikasi Anda:

// 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
sumber
27
Saya tidak mengerti mengapa Anda akan menyuntikkannya ketika sudah ada dalam ruang lingkup global.
— Walter Stabosz
36
Mungkin karena alasan yang sama Anda menyuntikkan sesuatu, alih-alih menempatkan semuanya dalam lingkup global. Namun, karena Anda jauh lebih kecil kemungkinannya ingin mengganti pustaka garis bawah Anda selama pengujian daripada beberapa ketergantungan lainnya yang lebih spesifik, dapat dimengerti bahwa itu tampaknya tidak perlu.
— fess.
50
itu diperlukan ketika Anda menambahkan 'gunakan ketat' ke file Anda. Karena garis bawah / lodash tidak didefinisikan, ia akan melempar ReferenceError: _ tidak didefinisikan ... Anda harus menyuntikkannya, atau menggunakan window._
— Shanimal
23
Ha! Saya ingin melakukan injeksi karena itu keren, terima kasih telah memberi saya alasan sebenarnya, @Simalimal.
— Aditya MP
10
Anda mungkin juga ingin menyuntikkan _ demi pengujian. Bagaimana Anda akan membawa ketergantungan garis bawah ke lingkungan test suite
— sunwukung
32

Saya telah menerapkan saran @ satchmorun di sini: https://github.com/andresesfm/angular-underscore-module

Untuk menggunakannya:

  1. Pastikan Anda telah memasukkan underscore.js dalam proyek Anda

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

  2. Mengerti:

    bower install angular-underscore-module

  3. Tambahkan angular-underscore-module.js ke file utama Anda (index.html)

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

  4. Tambahkan modul sebagai ketergantungan dalam definisi Aplikasi Anda

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

  5. Untuk menggunakannya, tambahkan sebagai ketergantungan yang disuntikkan ke Pengontrol / Layanan Anda dan siap digunakan

    angular.module('MyApp').controller('MyCtrl', function ($scope, _) {
...
//Use underscore
_.each(...);
...
— menyatukan
sumber
Tampaknya tidak berfungsi. Saya mendapatkan kesalahan yang tidak terdefinisi:Uncaught ReferenceError: _ is not defined
— chovy
Saya menambahkan klarifikasi: Anda harus menyertakan underscore.js. Konektor ini hanya membantu Anda menggunakannya dalam suatu layanan. Lihat jawaban @ satchmorun
— satukan
31

Saya menggunakan ini:

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

Lihat https://github.com/angular/angular.js/wiki/Understanding-Dependency-Injection tentang setengah jalan untuk informasi lebih lanjut run.

— kabel
sumber
ini terlihat bagus tetapi apakah Anda memiliki contoh? Saya perlu mengubah semua huruf besar ke atas pada karakter pertama hanya menggunakan _.capitalize ()
— Nate
2
Saya pikir ini harus berhasil <p>{{ _.capitalize('lalala') }}</p>?
— Kabel
1
@LVarayut Saya tidak tahu, mengapa tidak mencobanya? (Saya telah pindah ke ReactJS)
— kabel
Silakan gunakan layanan sebagai gantinya. Hindari menambahkan barang ke $ rootScope Anda akan membantu Anda memiliki kinerja yang lebih baik.
— Tim Hong
Tidak yakin apa yang saya lakukan salah tetapi saya tidak bisa mendapatkan bagian "penggunaan dalam tampilan" untuk bekerja. Tetapi meneruskan layanan ke controller dan kemudian ke tpl melalui $ ctrl berfungsi.
— Olivvv
1

Jika Anda tidak keberatan menggunakan lodash, coba https://github.com/rockabox/ng-lodash membungkus lodash sepenuhnya sehingga ini adalah satu-satunya ketergantungan dan Anda tidak perlu memuat file skrip lain seperti lodash.

Lodash benar-benar keluar dari lingkup jendela dan tidak ada "berharap" bahwa itu telah dimuat sebelum modul Anda.

— Nick White
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.