Skip to content
This repository was archived by the owner on Feb 2, 2025. It is now read-only.

Commit f1408bc

Browse files
l-linl-lin
committed
Switching language with angular-translate #351
It's not possible if the title is provided in the options and not directly in the HTML code. Remove the assignation of the title in the factory if the title is undefined.
1 parent 01547be commit f1408bc

11 files changed

+213
-69
lines changed

‎demo/app.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,11 @@ function translateConfig($translateProvider) {
9898
firstName: 'First name with angular-translate',
9999
lastName: 'Last name with angular-translate'
100100
});
101+
$translateProvider.translations('fr', {
102+
id: 'ID avec angular-translate',
103+
firstName: 'Prénom avec angular-translate',
104+
lastName: 'Nom avec angular-translate'
105+
});
101106
$translateProvider.preferredLanguage('en');
102107
}
103108

‎demo/usages.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,9 @@ angular.module('showcase.usages', ['ngResource'])
8787
}, {
8888
name: 'withAngularTranslate',
8989
label: 'With Angular Translate'
90+
}, {
91+
name: 'withAngularTranslateSwitchLanguage',
92+
label: 'Switch language with Angular Translate'
9093
}, {
9194
name: 'withFixedColumns',
9295
label: 'With Fixed Columns'

‎demo/withPlugins/withAngularTranslateSwitchLanguage.html

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<article class="main-content">
2+
<header class="article-header">
3+
<h1><i class="fa fa-play"></i>&nbsp;Switching language with <a href="http://angular-translate.github.io">Angular Translate</a></h1>
4+
</header>
5+
<section class="article-content">
6+
<p>
7+
Unfortunately, it's not possible (for now?) to switch language if you define the title of the columns in
8+
the controller. Only by providing the titles directly in the HTML code can you switch the language.
9+
</p>
10+
</section>
11+
<section class="showcase">
12+
<tabset>
13+
<tab heading="Preview">
14+
<article class="preview">
15+
<div ng-controller="WithAngularTranslateSwitchLanguageCtrl as showCase">
16+
<div class="form-horizontal">
17+
<div class="form-group">
18+
<label class="col-sm-2 control-label">Choose a language:</label>
19+
<div class="col-sm-3">
20+
<select class="form-control" ng-model="showCase.lang" ng-change="showCase.switchLanguage(showCase.lang)">
21+
<option value="en">English</option>
22+
<option value="fr">French</option>
23+
</select>
24+
</div>
25+
</div>
26+
</div>
27+
<table datatable
28+
dt-options="showCase.dtOptions"
29+
dt-columns="showCase.dtColumns"
30+
class="table table-striped table-bordered">
31+
<thead>
32+
<tr>
33+
<th>{{ 'id' | translate }}</th>
34+
<th>{{ 'firstName' | translate }}</th>
35+
<th>{{ 'lastName' | translate }}</th>
36+
</tr>
37+
</thead>
38+
</table>
39+
</div>
40+
</article>
41+
</tab>
42+
<tab heading="HTML">
43+
<div hljs>
44+
<div ng-controller="WithAngularTranslateSwitchLanguageCtrl as showCase">
45+
<div class="form-horizontal">
46+
<div class="form-group">
47+
<label class="col-sm-2 control-label">Choose a language:</label>
48+
<div class="col-sm-3">
49+
<select class="form-control" ng-model="showCase.lang" ng-change="showCase.switchLanguage(showCase.lang)">
50+
<option value="en">English</option>
51+
<option value="fr">French</option>
52+
</select>
53+
</div>
54+
</div>
55+
</div>
56+
<table datatable
57+
dt-options="showCase.dtOptions"
58+
dt-columns="showCase.dtColumns"
59+
class="table table-striped table-bordered">
60+
<thead>
61+
<tr>
62+
<th>{{ 'id' | translate }}</th>
63+
<th>{{ 'firstName' | translate }}</th>
64+
<th>{{ 'lastName' | translate }}</th>
65+
</tr>
66+
</thead>
67+
</table>
68+
</div>
69+
<!-- ... -->
70+
<script src="vendor/angular-translate/angular-translate.min.js"></script>
71+
</div>
72+
</tab>
73+
<tab heading="JS">
74+
<div hljs language="js">
75+
angular.module('showcase', ['datatables', 'pascalprecht.translate'])
76+
.config(translateConfig)
77+
.controller('WithAngularTranslateSwitchLanguageCtrl', WithAngularTranslateSwitchLanguageCtrl);
78+
79+
function translateConfig($translateProvider) {
80+
$translateProvider.translations('en', {
81+
id: 'ID with angular-translate',
82+
firstName: 'First name with angular-translate',
83+
lastName: 'Last name with angular-translate'
84+
});
85+
$translateProvider.translations('fr', {
86+
id: 'ID avec angular-translate',
87+
firstName: 'Prénom avec angular-translate',
88+
lastName: 'Nom avec angular-translate'
89+
});
90+
$translateProvider.preferredLanguage('en');
91+
}
92+
93+
function WithAngularTranslateSwitchLanguageCtrl(DTOptionsBuilder, DTColumnBuilder, $translate) {
94+
var vm = this;
95+
vm.dtOptions = DTOptionsBuilder.fromSource('data.json');
96+
vm.dtColumns = [
97+
DTColumnBuilder.newColumn('id'),
98+
DTColumnBuilder.newColumn('firstName'),
99+
DTColumnBuilder.newColumn('lastName')
100+
];
101+
vm.switchLanguage = switchLanguage;
102+
vm.lang = 'en';
103+
104+
function switchLanguage(lang) {
105+
$translate.use(lang);
106+
}
107+
}
108+
</div>
109+
</tab>
110+
</tabset>
111+
</section>
112+
</article>

‎demo/withPlugins/withAngularTranslateSwitchLanguage.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
'use strict';
2+
angular.module('showcase.withAngularTranslate')
3+
.controller('WithAngularTranslateSwitchLanguageCtrl', WithAngularTranslateSwitchLanguageCtrl);
4+
5+
function WithAngularTranslateSwitchLanguageCtrl(DTOptionsBuilder, DTColumnBuilder, $translate) {
6+
var vm = this;
7+
vm.dtOptions = DTOptionsBuilder.fromSource('data.json');
8+
vm.dtColumns = [
9+
DTColumnBuilder.newColumn('id'),
10+
DTColumnBuilder.newColumn('firstName'),
11+
DTColumnBuilder.newColumn('lastName')
12+
];
13+
vm.switchLanguage = switchLanguage;
14+
vm.lang = 'en';
15+
16+
function switchLanguage(lang) {
17+
$translate.use(lang);
18+
}
19+
}

‎dist/angular-datatables.js

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -380,7 +380,9 @@ function dtColumnBuilder() {
380380
}
381381
var column = Object.create(DTColumn);
382382
column.mData = mData;
383-
column.sTitle = sTitle ||  '';
383+
if (angular.isString(sTitle)) {
384+
column.sTitle = sTitle;
385+
}
384386
return column;
385387
},
386388
DTColumn: DTColumn
@@ -1090,21 +1092,21 @@ function dtAjaxRenderer($q, $timeout, DTRenderer, DTRendererService, DT_DEFAULT_
10901092
}
10911093

10921094
function _doRender(options, $elem) {
1093-
var defer = $q.defer();
1094-
// Set it to true in order to be able to redraw the dataTable
1095-
options.bDestroy = true;
1096-
DTRendererService.hideLoading($elem);
1097-
// Condition to refresh the dataTable
1098-
if (_shouldDeferRender(options)) {
1099-
$timeout(function() {
1095+
var defer = $q.defer();
1096+
// Set it to true in order to be able to redraw the dataTable
1097+
options.bDestroy = true;
1098+
DTRendererService.hideLoading($elem);
1099+
// Condition to refresh the dataTable
1100+
if (_shouldDeferRender(options)) {
1101+
$timeout(function() {
1102+
defer.resolve(DTRendererService.renderDataTable($elem, options));
1103+
}, 0, false);
1104+
} else {
11001105
defer.resolve(DTRendererService.renderDataTable($elem, options));
1101-
}, 0, false);
1102-
} else {
1103-
defer.resolve(DTRendererService.renderDataTable($elem, options));
1106+
}
1107+
return defer.promise;
11041108
}
1105-
return defer.promise;
1106-
}
1107-
// See https://github.com/l-lin/angular-datatables/issues/147
1109+
// See https://github.com/l-lin/angular-datatables/issues/147
11081110
function _shouldDeferRender(options) {
11091111
if (angular.isDefined(options) && angular.isDefined(options.dom)) {
11101112
// S for scroller plugin

0 commit comments

Comments
 (0)