Ng-table: 그런트 λΉŒλ“œ ν›„ μ •λ ¬ 문제

에 λ§Œλ“  2014λ…„ 03μ›” 03일  Β·  29μ½”λ©˜νŠΈ  Β·  좜처: esvit/ng-table

'grunt build' 후에 정렬이 μž‘λ™ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. λ‚˜λŠ” 그것이 μ–΄λ–»κ²Œλ“  그것을 κΉ¨λœ¨λ¦¬λŠ” 것이 js-minify라고 κ°€μ •ν•©λ‹ˆλ‹€. 헀더λ₯Ό 클릭해도 아무 일도 μΌμ–΄λ‚˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. λ‹€λ₯Έ λͺ¨λ“  것이 μž‘λ™ν•˜μ§€λ§Œ μ΄μƒν•©λ‹ˆλ‹€. λΉ„μŠ·ν•œ λ¬Έμ œκ°€ μžˆλŠ” μ‚¬λžŒμ΄ μžˆμŠ΅λ‹ˆκΉŒ?

μ—¬κΈ° λ‚΄ μ§€μ‹œ μ»¨νŠΈλ‘€λŸ¬κ°€ μžˆμŠ΅λ‹ˆλ‹€.

controller: ['$scope', '$filter', 'ScoresAPI', 'ngTableParams', function($scope, $filter, ScoresAPI, ngTableParams)
{
    ScoresAPI.getLeagueStandings($scope.leagueId)
        .success(function(data)
        {
            $scope.tableParams = new ngTableParams({
                page: 1,
                count: data.length,
                sorting: false
            }, {
                total: data.length,
                counts: [],
                getData: function($defer, params)
                {
                    var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data;
                    $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                }
            });
        });
}]

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

제 κ²½μš°μ—λŠ” jsminify λŒ€μƒμ΄ μ•„λ‹ˆμ—ˆμŠ΅λ‹ˆλ‹€. κ·ΈλŸ¬λ‚˜ htmlmin λŒ€μƒμ΄μ—ˆμŠ΅λ‹ˆλ‹€. collapseBooleanAttributes λ₯Ό false둜 λ³€κ²½ν–ˆλŠ”λ° λ¬Έμ œκ°€ ν•΄κ²°λ˜μ—ˆμŠ΅λ‹ˆλ‹€. λŒ€μƒμ˜ 전체 ꡬ성은 λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€.

htmlmin: {
      dist: {
        options: {
          collapseWhitespace: true,
          collapseBooleanAttributes: false,
          removeCommentsFromCDATA: true,
          removeOptionalTags: true
        },
        files: [{
          expand: true,
          cwd: '<%= yeoman.dist %>',
          src: ['*.html', 'views/{,*/}*.html', 'app_components/{,**/}*.html'],
          dest: '<%= yeoman.dist %>'
        }]
      }
    }

λͺ¨λ“  29 λŒ“κΈ€

λ‚˜λŠ” 같은 λ¬Έμ œμ— 직면 ν•΄μžˆλ‹€.

제 κ²½μš°μ—λŠ” jsminify λŒ€μƒμ΄ μ•„λ‹ˆμ—ˆμŠ΅λ‹ˆλ‹€. κ·ΈλŸ¬λ‚˜ htmlmin λŒ€μƒμ΄μ—ˆμŠ΅λ‹ˆλ‹€. collapseBooleanAttributes λ₯Ό false둜 λ³€κ²½ν–ˆλŠ”λ° λ¬Έμ œκ°€ ν•΄κ²°λ˜μ—ˆμŠ΅λ‹ˆλ‹€. λŒ€μƒμ˜ 전체 ꡬ성은 λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€.

htmlmin: {
      dist: {
        options: {
          collapseWhitespace: true,
          collapseBooleanAttributes: false,
          removeCommentsFromCDATA: true,
          removeOptionalTags: true
        },
        files: [{
          expand: true,
          cwd: '<%= yeoman.dist %>',
          src: ['*.html', 'views/{,*/}*.html', 'app_components/{,**/}*.html'],
          dest: '<%= yeoman.dist %>'
        }]
      }
    }

μ’‹μ•„, λ‚΄ λ¬Έμ œλ„ ν•΄κ²°ν–ˆμŠ΅λ‹ˆλ‹€. 감사 ν•΄μš”!

λ‚˜λŠ” 였늘 λ°”λ‘œ 이 λ¬Έμ œμ— μ§λ©΄ν–ˆλ‹€. 이것은 μœ μš©ν•œ κ²ƒμœΌλ‘œ 판λͺ…λ˜μ—ˆμŠ΅λ‹ˆλ‹€.

ν•˜μ§€λ§Œ 이 μ†”λ£¨μ…˜μ΄ 문제λ₯Ό μ’…κ²°ν•œ κ²ƒμœΌλ‘œ κ°„μ£Όν•˜κΈ°μ— μΆ©λΆ„ν•œμ§€ ν™•μ‹ ν•  수 μ—†μŠ΅λ‹ˆλ‹€. λ‹€λ₯Έ λͺ¨λ“  것은 Gruntfile.jsλ₯Ό νŽΈμ§‘ν•˜μ§€ μ•Šκ³ λ„ μ œλŒ€λ‘œ μž‘λ™ν•©λ‹ˆλ‹€. ng-table이 μ—†λŠ” μ΄μœ λŠ” λ‚΄ 지식을 λ„˜μ–΄μ„œλŠ” κ²ƒμž…λ‹ˆλ‹€.

μˆ˜μ • ν”„λ‘œκ·Έλž¨μ€ μ €μ—κ²Œλ„ νš¨κ³Όμ μ΄μ—ˆμŠ΅λ‹ˆλ‹€. κ·ΈλŸ¬λ‚˜ 이것은 μ •λ§λ‘œ μž¬κ°œλ˜μ–΄μ•Ό ν•©λ‹ˆλ‹€. Readme에 에 λŒ€ν•œ 언급이 μžˆμ–΄μ•Ό ν•©λ‹ˆλ‹€.

μˆ˜μ • ν”„λ‘œκ·Έλž¨μ€ μ €μ—κ²Œλ„ νš¨κ³Όμ μ΄μ—ˆμŠ΅λ‹ˆλ‹€.

이것은 λ‚˜λ₯Ό μœ„ν•΄ μž‘λ™ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. λ‚˜λŠ” bowerλ₯Ό μ‚¬μš©ν•˜κ³  μœ„μ— κ²Œμ‹œλœ 버전과 λ‹€μŒ λ³€κ²½ 사항을 λͺ¨λ‘ μ‹œλ„ν–ˆμŠ΅λ‹ˆλ‹€.
src: ['_.html', '보기/{,_/}_.html', 'bower_components/{,__/}_.html'],

이것은 λ‚΄κ°€ 가지고 μžˆλŠ” html 파일 λͺ©λ‘μž…λ‹ˆλ‹€.

$ls -la bower_components/**/*.html
-rw-rw-r-- 1 andrei andrei 1585 iun  7  2013 bower_components/es5-shim/tests/index.html
-rw-rw-r-- 1 andrei andrei 1546 iun  7  2013 bower_components/es5-shim/tests/index.min.html

이 μˆ˜μ • 사항은 μ–΄λ–»κ²Œ μž‘λ™ν•©λ‹ˆκΉŒ? κ·Όλ³Έ 원인은 λ¬΄μ—‡μž…λ‹ˆκΉŒ? AngularJS 버전 1.2.15κ°€ μžˆμŠ΅λ‹ˆλ‹€.

κ°μ‚¬ν•©λ‹ˆλ‹€!.

흠... λ‚΄ μƒν™©μ—μ„œ $templateCache κ°€ μ‚¬μš©λœ κ²ƒμœΌλ‘œ 보이며 이것이 μœ„μ˜ "*.html" νŒ¨ν„΄μ„ λ¬΄μ‹œν•˜λŠ” μ΄μœ μž…λ‹ˆλ‹€.

    $templateCache.put('ng-table/header.html', '<tr> <th ng-repeat="column in $columns" ng-class="{ \'sortable\': parse(column.sortable), \'sort-asc\': params.sorting()[parse(column.sortable)]==\'asc\', \'sort-desc\': params.sorting()[parse(column.sortable)]==\'desc\' }" ng-click="sortBy(column, $event)" ng-show="column.show(this)" ng-init="template=column.headerTemplateURL(this)" class="header {{column.class}}"> <div ng-if="!template" ng-show="!template" ng-bind="parse(column.title)"></div> <div ng-if="template" ng-show="template"><div ng-include="template"></div></div> </th> </tr> <tr ng-show="show_filter" class="ng-table-filters"> <th ng-repeat="column in $columns" ng-show="column.show(this)" class="filter"> <div ng-repeat="(name, filter) in column.filter"> <div ng-if="column.filterTemplateURL" ng-show="column.filterTemplateURL"> <div ng-include="column.filterTemplateURL"></div> </div> <div ng-if="!column.filterTemplateURL" ng-show="!column.filterTemplateURL"> <div ng-include="\'ng-table/filters/\' + filter + \'.html\'"></div> </div> </div> </th> </tr>'),

λ‚΄ 문제λ₯Ό ν•΄κ²°ν–ˆμŠ΅λ‹ˆλ‹€. 'sortable="'name'""을 'data-sortable="'name'""으둜 λ°”κΎΈμ—ˆκ³  μž‘λ™ν•©λ‹ˆλ‹€. 이것 μ’€ 봐:
http://bit.ly/1BgfqTu

@faisalferoz 의 μ ‘κ·Ό 방식은 μš°λ¦¬μ—κ²Œλ„

λ‹€μ‹œ @esvit 이것은 μ‹€μ œλ‘œ readme에 μžˆμ–΄μ•Ό ν•©λ‹ˆλ‹€. 이것은 ν‘œμ€€ 및 맀우 일반적인 ν”„λ‘œλ•μ…˜ λΉŒλ“œ λ‹¨κ³„μ—μ„œ λ²—μ–΄λ‚˜λŠ” μ€‘μš”ν•œ κΈ°λŠ₯μž…λ‹ˆλ‹€.

@andreicristianpetcu 의 μ ‘κ·Ό 방식은 μš°λ¦¬μ—κ²Œλ„ νš¨κ³Όκ°€

당신은 λ‚˜μ˜ μ˜μ›…μž…λ‹ˆλ‹€. 이 μ†”λ£¨μ…˜μ„ 찾지 λͺ»ν–ˆλ‹€λ©΄ 이 문제둜 남은 저녁 μ‹œκ°„μ„ λ³΄λƒˆμ„ 것이라고 ν™•μ‹ ν•©λ‹ˆλ‹€.

감사 ν•΄μš”!!! 이것은 λ‚˜λ₯Ό 미치게 λ§Œλ“€μ—ˆλ‹€.

Gruntfileμ—μ„œ collapseBooleanAttributes λ₯Ό false둜 변경해도 μ—¬μ „νžˆ 이 λ¬Έμ œκ°€ ν•΄κ²°λ©λ‹ˆλ‹€. μ°Ύμ•„μ£Όμ…”μ„œ κ°μ‚¬ν•©λ‹ˆλ‹€.

@faisalferoz 의 ν•΄κ²° 방법에 +1.

였늘이 λ¬Έμ œκ°€ λ°œμƒν–ˆμŠ΅λ‹ˆλ‹€.

그런트 νŒŒμΌμ— λ³€κ²½ 사항 μ—†μŒ collapseBooleanAttributes: true

이것은 μ •λ ¬ν–ˆμŠ΅λ‹ˆλ‹€: sortable => data-sortable

Gruntfile의 htmlmin.dist.options μ—μ„œ collapseBooleanAttributes: λ₯Ό false 둜 λ³€κ²½ν•˜μ—¬ 이 문제λ₯Ό ν•΄κ²°ν–ˆμŠ΅λ‹ˆλ‹€.

μ‹€μ œλ‘œ 두 가지 μž‘μ—…μ„ μˆ˜ν–‰ν•΄μ•Ό ν–ˆμŠ΅λ‹ˆλ‹€... collapseBooleanAttributes: λ₯Ό false λ³€κ²½ν•˜κ³  μ½”λ“œλ„ <td data-title="'App score'" sortable="'gender'" >{{content.gender}}</td> μ—μ„œ <td sortable="'gender'" data-title="'App score'" >{{content.gender}}</td> ν•˜μ—¬ 데이터 μ •λ ¬λ§ŒμœΌλ‘œ μž‘μ—…ν–ˆμŠ΅λ‹ˆλ‹€. λ‚˜λ₯Ό μœ„ν•΄ μˆ˜μ •ν•˜μ§€ μ•Šμ•˜μŠ΅λ‹ˆλ‹€ ...

@Jony-Y μ΄μƒν•©λ‹ˆλ‹€. λ”°λΌμ„œ <td> μš”μ†Œμ—μ„œ ngTable 속성을 μ§€μ •ν•˜λŠ” μˆœμ„œλ₯Ό μ „ν™˜ν•΄μ•Ό ν–ˆμŠ΅λ‹ˆκΉŒ?

μ’‹μ•„, λ‚΄ λ¬Έμ œλ„ ν•΄κ²°ν–ˆμŠ΅λ‹ˆλ‹€. 감사 ν•΄μš”!

λ‚˜λŠ” collapseBooleanAttributes: true λ₯Ό false 둜 λ³€κ²½ν•˜κ³  μ •λ ¬ν•  수 μžˆμŠ΅λ‹ˆλ‹€. κ°μ‚¬ν•©λ‹ˆλ‹€.

두 μ†”λ£¨μ…˜ λͺ¨λ‘ μ €μ—κ²Œ νš¨κ³Όμ μ΄μ—ˆμŠ΅λ‹ˆλ‹€.
κ·ΈλŸ¬λ‚˜ CSS λ¬Έμ œλ„ λ°œμƒν–ˆμŠ΅λ‹ˆλ‹€(μ •λ ¬λ˜μ§€ μ•Šμ€ μ—΄μ˜ μœ„μͺ½ ν™”μ‚΄ν‘œ 2개 μ°Έμ‘°).
ng-table-css-min

λ‹€μŒ μ˜΅μ…˜μ„ μ„€μ •ν•˜λ©΄ λ¬Έμ œκ°€ ν•΄κ²°λ˜μ—ˆμŠ΅λ‹ˆλ‹€.

        cssmin: {
            options: {
                advanced: false
            }
        },


@andreicristianpetcu +1 μ €μ—κ²Œλ„ νš¨κ³Όκ°€

νš¨κ³Όκ°€ μžˆμ–΄μ„œ λ‹€ν–‰μž…λ‹ˆλ‹€ :D

λΆ•κ΄΄BooleanAttributesλ₯Ό λ³€κ²½ν•˜λ©΄ λ‚΄ λ¬Έμ œκ°€ ν•΄κ²°λ˜μ—ˆμŠ΅λ‹ˆλ‹€.

data-sortable을 μ‚¬μš©ν•˜λ©΄ μ €μ—κ²Œ νš¨κ³Όμ μ΄μ—ˆμŠ΅λ‹ˆλ‹€.

그런트 파일 μΆ•μ†ŒBooleanAttributes: true둜 λ³€κ²½ν•˜λ©΄ 1초 μ•ˆμ— λ‹€μ‹œ μž‘λ™ν•©λ‹ˆλ‹€.

이것은 μ „ν˜€ λ„μ›€μ΄λ˜μ§€ μ•Šμ•˜μŠ΅λ‹ˆλ‹€ : sortable => data-sortable

νŒμ„μœ„ν•œ thx 녀석듀 ...

HTMLmin

λ‚˜λ₯Ό μœ„ν•΄ ν•΄κ²°λ˜μ—ˆμŠ΅λ‹ˆλ‹€.

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰