ng-table & yeoman - 排序在开发中工作正常但在生产中中断
ng-table & yeoman - sorting works fine in development but breaks in production
这可能有些愚蠢,但我就是想不通。
我正在使用:
- angularJS (1.4.7)
- 自耕农 generator-angular (0.12.1)(没有 Sass)
- ng-table (0.8.3)
当我在开发过程中 运行 'grunt serve' 时,table 工作得很好。但是当我 运行 'grunt' 并使用 dist 文件夹时,列不再是 sortable。 class 'sortable' 似乎未应用于生产版本中的 header 单元,而它正在开发中。
如有任何帮助,我们将不胜感激。
控制器:
angular.module('couponWebApp').controller('MainCtrl', ['NgTableParams', 'couponService',
function(NgTableParams, couponService) {
var PAGE_SIZE = 10;
var lastPage = 2;
var lastPageDiscovered = false;
var self = this;
self.tableParams = new NgTableParams({}, {
counts: [], // we don't want to display other page count options
getData: function(params) {
var currentdata = params.data;
return couponService.getAllBatches(PAGE_SIZE, params.page()).then(function(payload) {
if (payload.length < 1) { // no data for this page
lastPageDiscovered = true;
lastPage = params.page() - 1;
params.total(params.page() - 1);
return currentdata;
} else if (payload.length < PAGE_SIZE) { // payload is smaller than page size
lastPage = params.page();
lastPageDiscovered = true;
params.total(lastPage);
return payload;
} else { // payload is equal to the page size
lastPage = (lastPageDiscovered ? lastPage : params.page() + 1);
params.total(lastPage);
return payload;
}
}, function() {
// error
});
}
});
}
]);
查看:
<table ng-table="main.tableParams" class="table table-striped" show-filter="false">
<tbody>
<tr ng-repeat="item in $data">
<td data-title="'Name'" sortable="'name'">
{{item.name}}
</td>
<td data-title="'Created'" sortable="'createDate'">
{{item.createDate | date: 'dd MMMM YYYY'}}
</td>
<td title="'Expiry Date'"sortable="'expiryDate'">
{{item.expiryDate | date: 'short'}}
</td>
<td title="'Created'" filter="{ vouchersCreated: 'number'}">
{{item.vouchersCreated}}
</td>
</tr>
</tbody>
</table>
</div>
这可能会有帮助。它失败的原因可能有很多。因为我不知道确切的原因。我正在修复最常见的问题。
在 Gruntfile 的 "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 %>'
}]
}
}
这可能有些愚蠢,但我就是想不通。
我正在使用:
- angularJS (1.4.7)
- 自耕农 generator-angular (0.12.1)(没有 Sass)
- ng-table (0.8.3)
当我在开发过程中 运行 'grunt serve' 时,table 工作得很好。但是当我 运行 'grunt' 并使用 dist 文件夹时,列不再是 sortable。 class 'sortable' 似乎未应用于生产版本中的 header 单元,而它正在开发中。
如有任何帮助,我们将不胜感激。
控制器:
angular.module('couponWebApp').controller('MainCtrl', ['NgTableParams', 'couponService',
function(NgTableParams, couponService) {
var PAGE_SIZE = 10;
var lastPage = 2;
var lastPageDiscovered = false;
var self = this;
self.tableParams = new NgTableParams({}, {
counts: [], // we don't want to display other page count options
getData: function(params) {
var currentdata = params.data;
return couponService.getAllBatches(PAGE_SIZE, params.page()).then(function(payload) {
if (payload.length < 1) { // no data for this page
lastPageDiscovered = true;
lastPage = params.page() - 1;
params.total(params.page() - 1);
return currentdata;
} else if (payload.length < PAGE_SIZE) { // payload is smaller than page size
lastPage = params.page();
lastPageDiscovered = true;
params.total(lastPage);
return payload;
} else { // payload is equal to the page size
lastPage = (lastPageDiscovered ? lastPage : params.page() + 1);
params.total(lastPage);
return payload;
}
}, function() {
// error
});
}
});
}
]);
查看:
<table ng-table="main.tableParams" class="table table-striped" show-filter="false">
<tbody>
<tr ng-repeat="item in $data">
<td data-title="'Name'" sortable="'name'">
{{item.name}}
</td>
<td data-title="'Created'" sortable="'createDate'">
{{item.createDate | date: 'dd MMMM YYYY'}}
</td>
<td title="'Expiry Date'"sortable="'expiryDate'">
{{item.expiryDate | date: 'short'}}
</td>
<td title="'Created'" filter="{ vouchersCreated: 'number'}">
{{item.vouchersCreated}}
</td>
</tr>
</tbody>
</table>
</div>
这可能会有帮助。它失败的原因可能有很多。因为我不知道确切的原因。我正在修复最常见的问题。
在 Gruntfile 的 "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 %>'
}]
}
}