Given the reference example of angular translate:
var app = angular.module('at', ['pascalprecht.translate']);
app.config(function ($translateProvider) {
$translateProvider.translations('en', {
TITLE: 'Hello',
FOO: 'This is a paragraph.',
BUTTON_LANG_EN: 'english',
BUTTON_LANG_DE: 'german'
});
$translateProvider.translations('de', {
TITLE: 'Hallo',
FOO: 'Dies ist ein Paragraph.',
BUTTON_LANG_EN: 'englisch',
BUTTON_LANG_DE: 'deutsch'
});
$translateProvider.preferredLanguage('en');
});
app.controller('Ctrl', function ($scope, $translate) {
$scope.changeLanguage = function (key) {
$translate.use(key);
};
});
I want dynamically add a limitTo option which limits the length of the translation showed.
Lets say i have controller ctrl with variable x
ctrl.x='FOO'
Then i have a html snippet
<span translate="ctrl.x"></span>
I would like somehow to write
<span translate="ctrl.x" limitTo=7>
and then the output would be
This is
How do i accomplish this?
Related
I'm new to angularjs.
I'm making an application which uses angularjs and Ng tags input.
Everything is fine, but I can't translate the source which is bound to ng tags input.
Here is my code :
<tags-input ng-model="tags"
add-on-paste="true">
<auto-complete source="Fruits"></auto-complete>
</tags-input>
And in my controller, I have :
var app = angular.module('at', ['pascalprecht.translate']);
app.config(function ($translateProvider) {
$translateProvider.translations('en', {
PINE_APPLE: 'Pine apple',
LEMON : 'Lemon',
TOMATO: 'Tomato'
});
$translateProvider.preferredLanguage('en');
});
app.controller('Ctrl', function ($scope, $translate) {
$scope.Fruits = [
{
text: 'TOMATO',
value: 1
},
{
text: 'PINE_APPLE',
value: 2
},
{
text: 'LEMON',
value: 3
}];
$scope.changeLanguage = function (key) {
$translate.use(key);
};
});
My question is : how can I translate my Fruits inside Ctrl controller to bind to ng tags input ?
Can anyone help me please ?
Thank you.
To translate the texts into a JSON object , you could try to translate the texts and then create the object with these translated texts.
var app = angular.module('at', ['pascalprecht.translate']);
app.config(function ($translateProvider) {
$translateProvider.translations('en', {
TOMATO: 'Tomato'
});
$translateProvider.preferredLanguage('en');
});
app.controller('Ctrl', function ($scope, $translate) {
var TEXT_TRANSLATED = $translate.instant('TOMATO'); //NEW LINE
$scope.Fruits = [
{
text: TEXT_TRANSLATED,
value: 1
}
];
I hope you find it useful!
Thank you , juvian
Finally, I tried to apply custom template of ng-tag input as you said, and it worked with dynamic translation.
From Angular translate documentation:
$translate(translationId[, interpolateParams], interpolationId);
What is the purpose of interpolationId parameter, can you also give an example?
What is the purpose of interpolationId parameter...
The purpose of interpolationId is to reference the identifier returned by getInterpolationIdentifier of a custom interpolation that has been added. You can add a custom interpolation using $translateProvider.addInterpolation.
This is documented better in angular-translate's Pluralization documentation.
...can you also give an example?
Here's an example:
https://plnkr.co/edit/cDpNzZ6T6TSc13Qmji77
HTML
<body ng-controller="MyCtrl">
$translate('greeting', {}, 'custom'): {{ customGreeting }}
<br> $translate('greeting', {}): {{ regularGreeting }}
</body>
JavaScript
var app = angular.module('app', [
'pascalprecht.translate'
]);
app.config(["$translateProvider",
function($translateProvider){
$translateProvider.translations('en',{
"greeting" : "Welcome Dinesh"
});
$translateProvider.preferredLanguage('en');
$translateProvider.addInterpolation('customInterpolator');
}
]);
app.controller('MyCtrl', [
'$scope',
'$translate',
function ($scope, $translate) {
$translate('greeting', {}, 'custom').then(function (result) {
$scope.customGreeting = result;
});
$translate('greeting', {}).then(function (result) {
$scope.regularGreeting = result;
});
}
]);
app.factory('customInterpolator', [
function () {
var customInterpolator = {};
customInterpolator.$get = function () {
};
customInterpolator.setLocale = function (locale) {
};
customInterpolator.getInterpolationIdentifier = function () {
return 'custom';
};
customInterpolator.interpolate = function (string, interpolateParams) {
return 'My custom interpolation message';
};
return customInterpolator;
}
]);
i am using https://angular-translate.github.io/ module for translation
my key array is
$scope.array = [
"full_name",
"email",
"phone_no"
];
and my translation for that is
$translateProvider.translations('en', {
full_name:'full name',
email:'email',
phone_no:'phone no'
});
and have code like this
<div ng-repeat="item in array">
{{item | translate}}
</div>
but i can't get translation. can anyone help to do proper way ??
Have you set the preferred language in the configuration? If you don't do so, the 'en' translations won't be applied.
.config(function($translateProvider) {
$translateProvider.translations('en', {
/* ... */
});
$translateProvider.preferredLanguage('en');
});
Live demo
This should do it
angular.module('app', ['pascalprecht.translate'])
.config(function($translateProvider) {
$translateProvider.translations('en', {
full_name: 'Full name',
email: 'Email address',
phone_no: 'Phone number'
});
$translateProvider.preferredLanguage('en');
$translateProvider.fallbackLanguage(['en']);
})
.controller('MainCtrl', function($scope) {
$scope.array = ['full_name','email','phone_no'];
});
Please check the code below. I've edited a ionic example of popup just to illustrate.
On showAlert1(), I reference 'this' as is and it doesn't work. On showAlert2(), I use a auxiliar variable '_this' that receives 'this' and it does works.
I've seen this kind of thing happening in other occasions, and I believe it's 'Controller as' syntax scope related, but why does this happens?
angular.module('myApp', ['ionic'])
.controller('PopupCtrl',function($scope, $ionicPopup) {
this.testAlert = function() {
alert('Alerting!');
};
this.showAlert1 = function() {
$ionicPopup.alert({
title: 'Don\'t eat that!',
template: 'It might taste good'
}, this).then(function() {
this.testAlert();
});
};
this.showAlert2 = function() {
var _this = this;
$ionicPopup.alert({
title: 'Don\'t eat that!',
template: 'It might taste good'
}, _this).then(function() {
_this.testAlert();
});
};
});
Here's a Code Pen: http://codepen.io/anon/pen/dPJVNN
Thanks!
"this" in javascript is not the same as "this" in other languages. You can think of it more as the context of a function call.
The default call context on a web application is window. However, when calling a function that is a property of an object, the context becomes the object.
So, in your example:
angular.module('myApp', ['ionic'])
.controller('PopupCtrl',function($scope, $ionicPopup) {
//"this" refers to the controller instance here (controllers are created by angular with the "new" operator)
this.testAlert = function() {
//inside of this function, "this" will still be the controller
alert('Alerting!');
};
//"this" is the controller
this.showAlert1 = function() {
//"this" is still the controller
$ionicPopup.alert({
title: 'Don\'t eat that!',
template: 'It might taste good'
}, this).then(function() {
//"this" is no longer the controller. It's probably "window", but it's possible that ionic sets this to some other parameter when it invokes the function.
//since it's not the controller, testAlert() is undefined!
this.testAlert();
});
};
//"this" is the controller
this.showAlert2 = function() {
//"this" is still the controller, and you have assigned _this to also be the controller
var _this = this;
$ionicPopup.alert({
title: 'Don\'t eat that!',
template: 'It might taste good'
}, _this).then(function() {
//"_this" is captured by the closure created by the function call, and it is still the controller, so testAlert() is defined.
_this.testAlert();
});
};
});
You'll often see this in code:
var self = this;
With "self" being used in place of this in order to avoid the confusion that you've encountered.
angular.module('myApp', ['ionic'])
.controller('PopupCtrl',function($scope, $ionicPopup) {
var self = this;
self.testAlert = function() {
alert('Alerting!');
};
self.showAlert1 = function() {
$ionicPopup.alert({
title: 'Don\'t eat that!',
template: 'It might taste good'
}, self).then(function() {
self.testAlert();
});
};
self.showAlert2 = function() {
$ionicPopup.alert({
title: 'Don\'t eat that!',
template: 'It might taste good'
}, self).then(function() {
self.testAlert();
});
};
});
The keyword 'this' refers to the current object it's in. So in your showAlert1() function, the 'this' refers to the $ionicPopup object.
So for example
var parent = {
value: 'parent',
alert: function(){
alert(this.value);
},
child: {
alert: function(){
alert(this.value);
}
}
}
if you do a parent.alert(), it will alert parent. But if you do a parent.child.alert() it will give you undefined because the 'this.value' for child doesnt exist, it doesnt refer to parent.value. So what this means is that this refers to the current object.
"this" in the .then() callback in showAlert1 is referring to the global object. Try this out:
angular.module('mySuperApp', ['ionic'])
.controller('PopupCtrl',function($scope, $ionicPopup) {
this.testAlert = function() {
alert('Alerting!');
};
this.showAlert1 = function() {
$ionicPopup.alert({
title: 'Don\'t eat that!',
template: 'It might taste good'
}, this).then(function() {
alert(this === window);
this.testAlert();
});
};
this.showAlert2 = function() {
var _this = this;
$ionicPopup.alert({
title: 'Don\'t eat that!',
template: 'It might taste good'
}, _this).then(function() {
_this.testAlert();
});
};
});
"this" is only working for showAlert1 and showAlert2 because you're referring to them as a property of the controller itself right here:
<button class="button button-primary" ng-click="popup.testAlert()">
What is preferable is using $scope:
<html ng-app="mySuperApp">
<head>
<meta charset="utf-8">
<title>
Popups
</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body class="padding" ng-controller="PopupCtrl">
<button class="button button-primary" ng-click="testAlert()">
Test Alert
</button>
<button class="button button-positive" ng-click="showAlert1()">
Alert1
</button>
<button class="button button-positive" ng-click="showAlert2()">
Alert2
</button>
<script id="popup-template.html" type="text/ng-template">
<input ng-model="data.wifi" type="text" placeholder="Password">
</script>
</body>
</html>
then the JS:
angular.module('mySuperApp', ['ionic'])
.controller('PopupCtrl',function($scope, $ionicPopup) {
$scope.testAlert = function() {
alert('Alerting!');
};
$scope.showAlert1 = function() {
$ionicPopup.alert({
title: 'Don\'t eat that!',
template: 'It might taste good'
}).then(function() {
$scope.testAlert();
});
};
$scope.showAlert2 = function() {
$ionicPopup.alert({
title: 'Don\'t eat that!',
template: 'It might taste good'
}).then(function() {
$scope.testAlert();
});
};
});
I'd like to have function calls for ng-click stored as strings in my model.
I can't use ng-click="m.func", and if i'm using ng-click="{{m.func}}" ist also not working.
http://jsfiddle.net/j8wW5/19/
It also looks like angular 1.2.0 throws an error in case of ng-click="{{m.func}}".
How can I bring it to work?
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="m in model">{{m.caption}}</div>
</div>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.model = [
{
caption: 'callme a',
func : 'callme_a()'
},
{
caption: 'callme b',
func : 'callme_b()'
}
]
$scope.callme_a = function() {
alert("called a");
}
$scope.callme_b = function() {
alert("called b");
}
});
You can do something like this:
In your html:
<div ng-repeat="m in model">{{m.caption}}</div>
In your controller:
$scope.callme_a = function() {
alert("called a");
}
$scope.callme_b = function() {
alert("called b");
}
$scope.model = [
{
caption: 'callme a',
func : $scope.callme_a
},
{
caption: 'callme b',
func : $scope.callme_b
}
]
$scope.call = function(el) {
el.func();
}
Fiddle
You can use
window["functionName"](arguments) //if the functioName is defined in global (window's scope)
OR
$scope["functionName"](arguments) //if the functioName is defined for $scope
So, updated controller code (of Beterraba) would be
callme_a = function() {
alert("called a");
}
callme_b = function() {
alert("called b");
}
$scope.model = [
{
caption: 'callme a',
func : "callme_a"
},
{
caption: 'callme b',
func : "callme_b"
}
]
$scope.call = function(el) {
window[el.func](arguments)
}
This is a variation on #Beterraba's answer.
Here is the fiddle.
HTML:
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="m in model">{{m.caption}}</div>
</div>
JS:
$scope.call = function(func) {
$scope[func]();
}
If you have to use strings to define the functions then this will work. But I would urge you to look again at your design.
Also, in order for this to work, you must take out the () in the function string:
$scope.model = [
{
caption: 'callme a',
func : 'callme_a'
},
{
caption: 'callme b',
func : 'callme_b'
}
]
It could be that ng-click is attaching an event listener to the dom with the ng-click attribute before it's evaluated to a string.
So, I've overridden the ngclick with a timeout to make what you want work :)
var app = angular.module('myApp', []);
app.directive('ngClick', ['$timeout','$parse', function($timeout, $parse) {
return {
compile: function($element, attr) {
return function(scope, element, attr) {
//I've wrapped this link function code in a $timeout
$timeout(function() {
var fn = $parse(attr["ngClick"]);
$(element[0]).on("click", function(event) {
scope.$apply(function() {
fn(scope, {$event:event});
});
});
})
};
}
};
}]);
(Here is the source code for ngClick - https://github.com/angular/angular.js/blob/master/src/ng/directive/ngEventDirs.js)
Check the fiddle here with the demo - http://jsfiddle.net/R2Cc9/5/