ใช้ขีดล่างภายในตัวควบคุมเชิงมุม

126

ฉันจะใช้ไลบรารีขีดล่างภายในตัวควบคุม angularjs ได้อย่างไร

ในโพสต์นี้: AngularJS limitTo by last 2 records มีคนแนะนำให้กำหนดตัวแปร _ ให้กับ rootScope เพื่อให้ไลบรารีพร้อมใช้งานสำหรับขอบเขตทั้งหมดภายในแอป

แต่ฉันไม่ชัดเจนว่าจะทำที่ไหน ฉันหมายความว่าควรไปประกาศโมดูลแอพหรือไม่ เช่น:

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

แต่ฉันจะโหลดขีดล่าง lib ได้ที่ไหน? ฉันมีในหน้าดัชนีของฉันคำสั่ง ng-app และการอ้างอิงสคริปต์ไปยัง 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>
...

ฉันจะบรรลุเป้าหมายนี้ได้อย่างไร?

javascript angularjs underscore.js

— ปาโบล
แหล่งที่มา

ลองทำอะไรแล้วไม่ได้ผล?

— mpm

ฉันไม่รู้จะเริ่มจากตรงไหน ฉันจะเชื่อมโยง king ของไฟล์ <script> กับส่วน angularjs ได้อย่างไร (ตัวควบคุมบริการคำสั่ง ... ฯลฯ ) มีความต้องการ ('... ') เช่นการแสดงออกหรือไม่?

— Pablo

เพียงแค่ประกาศแท็กสคริปต์ที่ถูกต้องพร้อมขีดล่างในไฟล์ html ของคุณเช่นเดียวกับที่คุณทำกับ angular หรือ jquery

— mpm

จะพร้อมใช้งานโดยอัตโนมัติภายใต้อักขระ _ หรือไม่? วิธี ??

— Pablo

231

เมื่อคุณรวมขีดล่างมันจะแนบตัวเองกับwindowวัตถุและพร้อมใช้งานทั่วโลก

ดังนั้นคุณสามารถใช้งานได้จากรหัสเชิงมุมตามที่เป็นอยู่

คุณสามารถห่อในสถานบริการหรือโรงงานได้หากต้องการฉีด:

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

จากนั้นคุณสามารถขอ_ในโมดูลของแอปของคุณ:

// 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
แหล่งที่มา

27

ฉันไม่เข้าใจว่าทำไมคุณถึงต้องฉีดเมื่อมันอยู่ในขอบเขตของหน้าต่างส่วนกลางแล้ว

— Walter Stabosz

36

อาจด้วยเหตุผลเดียวกับที่คุณฉีดอะไรเข้าไปแทนที่จะให้ทุกอย่างอยู่ในขอบเขตทั่วโลก อย่างไรก็ตามเนื่องจากคุณมีโอกาสน้อยมากที่จะต้องการแทนที่ไลบรารีขีดล่างของคุณในระหว่างการทดสอบมากกว่าการอ้างอิงที่เฉพาะเจาะจงอื่น ๆ จึงเป็นที่เข้าใจได้ว่าดูเหมือนไม่จำเป็น

— fess.

50

จำเป็นเมื่อคุณเพิ่ม 'ใช้อย่างเข้มงวด' ลงในไฟล์ของคุณ เนื่องจากไม่ได้กำหนดขีดล่าง / lodash จึงจะโยน ReferenceError: _ ไม่ได้กำหนดไว้ ... คุณต้องฉีดหรือใช้ window_

— Shanimal

23

ฮา! ฉันอยากจะฉีดยาเพราะมันเจ๋งมากขอบคุณที่ให้เหตุผลที่แท้จริง @Shanimal

— Aditya MP

10

คุณอาจต้องการฉีด _ เพื่อประโยชน์ในการทดสอบ คุณจะนำการพึ่งพาขีดล่างเข้าสู่สภาพแวดล้อมชุดทดสอบได้อย่างไร

— sunwukung

32

ฉันได้ใช้คำแนะนำของ @ satchmorun ที่นี่: https://github.com/andresesfm/angular-underscore-module

วิธีใช้:

ตรวจสอบให้แน่ใจว่าคุณได้ใส่ underscore.js ไว้ในโปรเจ็กต์ของคุณ
```
<script src="bower_components/underscore/underscore.js">
```
รับมัน:
```
bower install angular-underscore-module
```
เพิ่ม angular-underscore-module.js ให้กับไฟล์หลักของคุณ (index.html)
```
<script src="bower_components/angular-underscore-module/angular-underscore-module.js"></script>
```
เพิ่มโมดูลเป็นการอ้างอิงในข้อกำหนดแอพของคุณ
```
var myapp = angular.module('MyApp', ['underscore'])
```
ในการใช้งานให้เพิ่มการพึ่งพาแบบฉีดเข้าไปในคอนโทรลเลอร์ / บริการของคุณและพร้อมใช้งาน
```
angular.module('MyApp').controller('MyCtrl', function ($scope, _) {
...
//Use underscore
_.each(...);
...
```

— รวมกัน
แหล่งที่มา

ไม่ปรากฏว่าทำงาน ฉันได้รับข้อผิดพลาดที่ไม่ได้กำหนด:Uncaught ReferenceError: _ is not defined

— chovy

ฉันได้เพิ่มคำชี้แจง: คุณต้องใส่ underscore.js ตัวเชื่อมต่อนี้ช่วยให้คุณใช้ในบริการเท่านั้น ดูคำตอบของ @ satchmorun

— รวมกัน

31

ฉันใช้สิ่งนี้:

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

ดูhttps://github.com/angular/angular.js/wiki/Understanding-Dependency-Injectionrunประมาณครึ่งทางสำหรับบางข้อมูลเพิ่มเติมเกี่ยวกับ

— สายไฟ
แหล่งที่มา

ดูดี แต่มีตัวอย่างไหม ฉันจำเป็นต้องเปลี่ยนเป็นตัวพิมพ์ใหญ่ทั้งหมดไปบนของตัวอักษรตัวแรกเป็นเพียงการใช้ _.capitalize ()

— เนท

2

ฉันคิดว่ามันควรจะทำงาน<p>{{ _.capitalize('lalala') }}</p>?

— เดินสาย

1

@LVarayut ไม่รู้ทำไมไม่ลองดูล่ะ (ฉันได้ย้ายไปที่ ReactJS แล้ว)

— สาย

กรุณาใช้บริการแทน หลีกเลี่ยงการเพิ่มเนื้อหาลงใน $ rootScope จะช่วยให้คุณมีประสิทธิภาพที่ดีขึ้น

— Tim Hong

ไม่แน่ใจว่าฉันทำอะไรผิด แต่ฉันไม่สามารถทำให้ส่วน "ใช้ในมุมมอง" ทำงานได้ แต่การส่งผ่านบริการไปยังคอนโทรลเลอร์แล้วไปที่ tpl ผ่าน $ ctrl ก็ใช้งานได้

— Olivvv

3

คุณยังสามารถดูโมดูลนี้เพื่อหามุม

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

— Paul Sheldrake
แหล่งที่มา

คุณโหลดสิ่งนี้ในคอนโทรลเลอร์ได้อย่างไร?

— chovy

3

ฉันมักจะกังวลเกี่ยวกับโมดูลที่ไม่ได้รับการอัปเดตเป็นเวลาหลายปี

— Tahir Khalid

1

หากคุณไม่สนใจที่จะใช้ lodash ลองใช้https://github.com/rockabox/ng-lodashมันจะรวม lodash ไว้อย่างสมบูรณ์ดังนั้นจึงเป็นการพึ่งพาเพียงอย่างเดียวและคุณไม่จำเป็นต้องโหลดไฟล์สคริปต์อื่น ๆ เช่น lodash

Lodash อยู่นอกขอบเขตหน้าต่างโดยสิ้นเชิงและไม่มี "หวัง" ว่าจะโหลดก่อนโมดูลของคุณ

— นิคไวท์
แหล่งที่มา

-2

คุณสามารถใช้โมดูลนี้ -> https://github.com/jiahut/ng.lodash

นี่เป็นlodashเช่นนั้นunderscore

— jiahut
แหล่งที่มา

1

โปรดให้คำแนะนำการใช้งาน

— Paul Preibisch