Angular 컨트롤러 내에서 밑줄 사용

126

angularjs 컨트롤러에서 밑줄 라이브러리를 어떻게 사용합니까?

이 게시물 : 지난 2 개의 AngularJS limitTo 레코드는 누군가가 _ 변수를 rootScope에 할당하여 라이브러리를 응용 프로그램의 모든 범위에서 사용할 수 있도록 제안했습니다.

그러나 나는 어디에서 해야할지 확실하지 않습니다. 앱 모듈 선언으로 가야합니까? 즉 :

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

그러면 밑줄 lib를 어디에로드합니까? 내 색인 페이지에 ng-app 지시문과 angular-js 및 밑줄 라이브러리에 대한 스크립트 참조가 있습니까?

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
글쎄, 어디서부터 시작해야할지 모르겠다. <script> 파일을 angularjs 부분과 어떻게 연결합니까? (컨트롤러, 서비스, 지시문 등). expression과 같은 require ( '...')가 있습니까?
— Pablo
angular 또는 jquery와 마찬가지로 html 파일에 밑줄로 적절한 스크립트 태그를 선언하십시오.
— mpm
_ 문자 아래에서 자동으로 사용할 수 있습니까 ?? 어떻게??
— Pablo

답변:

231

Underscore를 포함 시키면 밑줄 자체가 window객체에 첨부 되므로 전체적으로 사용할 수 있습니다.

따라서 Angular 코드에서 그대로 사용할 수 있습니다.

주사를 원하는 경우 서비스 나 공장에서 포장 할 수도 있습니다.

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
});
— atch 치
소스
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

그것을 사용하려면 :

  1. 프로젝트에 underscore.js를 포함 시켰는지 확인하십시오

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

  2. 그것을 얻으십시오 :

    bower install angular-underscore-module

  3. angular-underscore-module.js를 기본 파일 (index.html)에 추가

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

  4. 앱 정의에서 모듈을 종속성으로 추가

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

  5. 사용하려면 Controller / Service에 주입 된 종속성으로 추가하면 바로 사용할 수 있습니다

    angular.module('MyApp').controller('MyCtrl', function ($scope, _) {
...
//Use underscore
_.each(...);
...
— 하나로 하다
소스
작동하지 않는 것 같습니다. 정의되지 않은 오류가 발생합니다 :Uncaught ReferenceError: _ is not defined
— chovy
설명을 추가했습니다. underscore.js를 포함해야합니다. 이 커넥터는 서비스에서 사용하는 데 도움이됩니다. satchmorun의 대답 @ 참조
— 의 Unify
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-Injection을 참조 하십시오run .

— 전선
소스
이것은 좋아 보이지만 예가 있습니까? _.capitalize ()
— Nate
2
나는 이것이 작동해야한다고 생각 <p>{{ _.capitalize('lalala') }}</p>합니까?
— 전선
1
@LVarayut 모르겠다, 왜 시도하지? (I 이후 ReactJS 이동 한)
— 와이어
대신 서비스를 이용하십시오. $ rootScope에 물건을 추가하지 마십시오. 성능을 향상시키는 데 도움이됩니다.
— Tim Hong
내가 잘못한 것이 확실하지 않지만 "뷰에서 사용"부분이 작동하지 않습니다. 그러나 서비스를 컨트롤러에 전달 한 다음 $ ctrl을 통해 tpl에 전달합니다.
— Olivvv
1

lodash를 사용하는 것이 마음에 들지 않으면 https://github.com/rockabox/ng-lodash를 사용해보십시오. lodash를 완전히 감싸서 유일한 종속성이므로 lodash와 같은 다른 스크립트 파일을로드 할 필요가 없습니다.

Lodash는 창 범위에서 완전히 벗어 났으며 모듈 이전에로드 된 "홉핑"이 없습니다.

— 닉 화이트
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.