developer tip

Lodash를 Angular JS와 함께 사용하는 방법은 무엇입니까?

optionbox 2020. 11. 16. 08:08
반응형

Lodash를 Angular JS와 함께 사용하는 방법은 무엇입니까?


다음과 같이 lodash를 사용하여 ng-repeat지시문 에서 사용하려고합니다 .

<div ng-controller="GridController" ng-repeat="n in _.range(5)">
    <div>Hello {{n}}</div>
</div>

존재 GridController:

IndexModule.controller('GridController', function () {

this._ = _

})

그러나 작동하지 않으므로 반복되는 것이 없습니다 . 지시문을 변경하면 ng-repeat="i in [1,2,3,4,5]"작동합니다.

lodash이미 통해 포함되어 <script>에서 <header>angular. 어떻게 작동시킬 수 있습니까?


나는 '_'를 전역 적으로 소개하고 테스트를 위해 주입하는 것을 선호합니다.이 질문에 대한 대답을 참조하십시오. 컨트롤러 내부에서 밑줄 사용

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

@beret 및 @wires의 답변에 대한 설명을 추가하고 싶었습니다. 그들은 확실히 돕고 그것에 대한 요점을 얻었지만 전체 프로세스를 순서대로 얻는 것이 누군가에게 적합 할 수 있습니다. 이것이 lodash로 앵귤러 환경을 설정하고 yeoman gulp-angular로 제대로 작동하도록하는 방법입니다.

  • bower install lodash --save (이것은 bower에 추가되고 bower json에 저장됩니다)

  • angular가 수행하기 전에 lodash로드를 갖도록 bower json을 수정하십시오. (이것은 gulp inject를 사용하고 수동으로 index.html에 넣지 않으려는 경우 도움이됩니다. 그렇지 않으면 각도 링크 앞에 index.html에 넣으십시오)

  • @wires의 방향에 따라 새로운 상수를 만드십시오.

'use strict';

angular.module('stackSample')
  // lodash support
  .constant('_', window._);
  • 다른 서비스와 마찬가지로 각도 서비스, 필터 또는 컨트롤러에 주입합니다.
.filter('coffeeFilter', ['_', function(_) {...}]);
  • 각도 HTML 뷰에 던져 넣으려면 컨트롤러에 주입하고 범위 변수를 할당하십시오.
.controller('SnesController', function ($scope, _) {
  $scope._ = _;
})

누군가가 자신의 사이트를 설정하는 데 도움이되기를 바랍니다. :)


ng-repeatAngular 범위 변수에 대한 액세스 권한이있는 Angular 표현식이 필요합니다. 그래서 대신 할당 _this받는 할당, $scope당신이 컨트롤러에 주입 목적 :

IndexModule.controller('GridController', function ($scope) {
  $scope._ = _;
})

데모


사용중인 Angular 버전이 무엇인지 잘 모르겠습니다. 'this'를 사용하여 dom의 변수에 액세스 할 때 'Controller as'구문을 사용 했어야하는 것 같습니다.

다음은 범위를 사용하지 않는 솔루션입니다. http://plnkr.co/edit/9IybWRrBhlgQAOdAc6fs?p=info

 <body ng-app="myApp" ng-controller="GridController as grid">
      <div ng-repeat="n in grid._.range(5)">
      <div>Hello {{n}}</div>
    </div>
  </body>

참고 URL : https://stackoverflow.com/questions/23862119/how-to-make-lodash-work-with-angular-js

반응형