Sử dụng dấu gạch dưới trong bộ điều khiển góc

126

Làm cách nào để sử dụng thư viện gạch dưới trong bộ điều khiển angularjs?

Trên bài đăng này: AngularJS giới hạnĐối với 2 bản ghi cuối, ai đó đã đề xuất gán biến _ cho rootScope để thư viện sẽ có sẵn cho tất cả các phạm vi trong ứng dụng.

Nhưng tôi không rõ phải làm ở đâu. Tôi có nghĩa là nó nên đi trên khai báo mô-đun ứng dụng? I E:

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

Nhưng sau đó tôi tải lib gạch dưới ở đâu? Tôi chỉ có trên trang chỉ mục của mình chỉ thị ng-app và tập lệnh tham chiếu đến cả libs-js và gạch dưới gạch dưới?

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

Làm thế nào để tôi đạt được điều này?

javascript  angularjs  underscore.js 
— Pablo
nguồn
Bạn đã thử và không làm gì?
— mpm
Chà, tôi không biết bắt đầu từ đâu. Làm cách nào để liên kết bất kỳ vị vua nào của tập tin <script> với phần angularjs? (bộ điều khiển, dịch vụ, chỉ thị ... vv). Có bất kỳ yêu cầu ('...') như biểu hiện không?
— Pablo
chỉ cần khai báo thẻ script phù hợp với dấu gạch dưới trong tệp html của bạn, giống như bạn đã làm với góc hoặc jquery.
— mpm
Nó sẽ tự động có sẵn dưới ký tự _ chứ ?? Làm sao??
— Pablo

Câu trả lời:

231

Khi bạn bao gồm Underscore, nó sẽ tự gắn vào windowđối tượng và do đó có sẵn trên toàn cầu.

Vì vậy, bạn có thể sử dụng nó từ mã Angular như vốn có.

Bạn cũng có thể gói nó trong một dịch vụ hoặc nhà máy, nếu bạn muốn nó được tiêm:

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

Và sau đó bạn có thể yêu cầu _mô-đun trong ứng dụng của mình:

// 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
nguồn
27
Tôi không hiểu tại sao bạn lại tiêm nó khi nó đã ở trong phạm vi cửa sổ toàn cầu.
— Walter Stabosz
36
Có lẽ vì những lý do tương tự bạn tiêm bất cứ thứ gì, thay vì đặt mọi thứ trong phạm vi toàn cầu. Tuy nhiên, vì bạn ít có khả năng muốn thay thế thư viện gạch dưới của mình trong quá trình kiểm tra so với một số phụ thuộc cụ thể khác, điều đó có thể hiểu rằng điều đó dường như không cần thiết.
— fess.
50
cần thiết khi bạn thêm 'sử dụng nghiêm ngặt' vào tệp của mình. Vì dấu gạch dưới / lodash không được xác định, nó sẽ ném ReferenceError: _ không được xác định ... bạn phải tiêm nó hoặc sử dụng window._
— Shanimal
23
Hà! Tôi muốn thực hiện tiêm vì nó tuyệt, cảm ơn vì đã cho tôi một lý do thực sự, @Shanimal.
— MP Aditya
10
bạn cũng có thể muốn tiêm _ vì mục đích thử nghiệm. Làm thế nào bạn sẽ đi về việc đưa sự phụ thuộc dưới mức vào một môi trường bộ thử nghiệm
— sunwukung
32

Tôi đã triển khai đề xuất của @ satchmorun tại đây: https://github.com/andresesfm/angular-underscore-module

Để dùng nó:

  1. Hãy chắc chắn rằng bạn đã bao gồm underscore.js trong dự án của bạn

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

  2. Hiểu rồi:

    bower install angular-underscore-module

  3. Thêm angular-underscore-module.js vào tệp chính của bạn (index.html)

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

  4. Thêm mô-đun như một phụ thuộc trong định nghĩa ứng dụng của bạn

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

  5. Để sử dụng, hãy thêm dưới dạng phụ thuộc được tiêm vào Bộ điều khiển / Dịch vụ của bạn và nó đã sẵn sàng để sử dụng

    angular.module('MyApp').controller('MyCtrl', function ($scope, _) {
...
//Use underscore
_.each(...);
...
— thống nhất
nguồn
Không xuất hiện để làm việc. Tôi nhận được một lỗi không xác định:Uncaught ReferenceError: _ is not defined
— chovy
Tôi đã thêm làm rõ: bạn cần bao gồm underscore.js. Kết nối này chỉ giúp bạn sử dụng nó trong một dịch vụ. Xem câu trả lời của @ satchmorun
— thống nhất
31

Tôi sử dụng cái này:

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

Xem https://github.com/angular/angular.js/wiki/Under Hiểu-Dependency-Nhập khoảng một nửa để biết thêm thông tin về run.

— Dây điện
nguồn
Điều này có vẻ tốt nhưng bạn có một ví dụ? Tôi cần thay đổi tất cả chữ hoa thành chữ hoa trên ký tự đầu tiên chỉ bằng cách sử dụng _.capitalize ()
— Nate
2
Tôi nghĩ rằng điều này nên làm việc <p>{{ _.capitalize('lalala') }}</p>?
— dây
1
@LVarayut Tôi không biết, tại sao không thử? (Tôi đã chuyển đến ReactJS)
— dây
Vui lòng sử dụng dịch vụ thay thế. Tránh thêm công cụ vào $ rootScope sẽ giúp bạn có hiệu suất tốt hơn.
— Tim Hồng
Không chắc chắn những gì tôi đã làm sai nhưng tôi không thể làm cho phần "sử dụng trong lượt xem" hoạt động. Nhưng việc chuyển dịch vụ tới bộ điều khiển và sau đó đến tpl thông qua $ ctrl hoạt động.
— Olivvv
1

Nếu bạn không phiền khi sử dụng lodash, hãy thử https://github.com/rockabox/ng-lodash, nó hoàn toàn kết thúc lodash để nó là phụ thuộc duy nhất và bạn không cần phải tải bất kỳ tệp script nào khác như lodash.

Lodash hoàn toàn nằm ngoài phạm vi cửa sổ và không có "hy vọng" rằng nó đã được tải trước mô-đun của bạn.

— Nick trắng
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.