What is the best way to translate a string containing Angular bindings using Angular Translate?

I am looking to implement localization in an app I am currently developing using Angular Translate.

Here is a snippet of my code:

<p class="md-caption" translate="vm_stats_score"></p>

My goal is to assign this to an ID required by Angular Translate. However, when I try the following:

$translateProvider.translations('en', {
    vm_stats_score: 'Today from {{::vm.stats.votes}} votes'
});

The desired binding value does not get included as expected.

Can anyone advise me on the correct approach for achieving this?

javascriptangularjsangular-translate

Answer №1

Based on information found in this resource, it appears that you have the ability to achieve the following:

<p class="md-caption" translate="vm_stats_score" translate-compile translate-values="{'votes': vm.stats.votes}"></p>

This particular code snippet will insert the values you provide into the <p> element through the use of translate-values.

In practice, I encountered difficulties making this work with one-time binding. Consequently, adjustments must be made to your string definition as illustrated below:

$translateProvider.translations('en', {
    vm_stats_score: 'Today from {{vm.stats.votes}} votes'
});

Answer №2

You cannot directly bind it, but there is an alternative method:

In your localization file, create a variable for the input, such as:

{
  "vm_stats_score": 'Today from {{votes}} votes'
}

In your HTML code, pass the value like this:

<p class="md-caption" translate="vm_stats_score" translate-values="{ votes: vm.stats.votes"></p>

Check out this example on Plunker and Learn more about variable replacement in the documentation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are the best plugins and projects to maximize IntelliJ IDEA's potential for JavaScript development?

I am currently in the process of developing a web application utilizing the MEAN stack: MongoDB, Express, Angular, and Node.js. The foundation of my project is built upon Daftmonk's angular-fullstack Yeoman generator. Despite my primary experience be ...

javascriptnode.jsangularjsmongodbintellij-idea

Running multiple nodemon inspect programs concurrently is not supported

Situation: currently operating Ubuntu 19.10 on an Inspiron 560. I am managing 2 distinct Discord bots that need to be active on the same device (my other spare machines are currently occupied with other tasks and lack the capacity to handle Discord bots). ...

javascriptnode.jsdiscorddiscord.jsnodemon

Unable to modify attribute within $templateCache through an AngularJS Directive

Here is my Directive code: module.directive('iconSwitcher', function() { return { restrict : 'A', link : function(scope, elem, attrs) { var currentState = true; elem.on('click', function() { ...

javascriptjqueryangularjsangularjs-directiveangular-directive

The div on my webpage is not loading its content as expected when using JavaScript

I am having trouble continuously loading the content of a div from another page. Using alert worked fine, but the page data is not loading. JavaScript <script> $(document).ready(function(){ setInterval(function(){$("#loadAvailable").load("update.p ...

javascriptphpjqueryajax

Removing a portion of an item with the power of RxJS

I possess the subsequent entity: const myObject = { items:[ { name: 'John', age: 35, children: [ { child: 'Eric', age: 10, sex: 'M' }, { ...

javascriptangulartypescriptrxjs

Retrieve the maximum value from a JSON object using JavaScript

This question seems straightforward, but I'm struggling to solve it. Could someone help me with a JavaScript solution to retrieve the largest value from this JSON object? {"data":{"one":21,"two":35,"three":24,"four":2,"five":18},"meta":{"title":"Ha ...

javascriptjsonsorting

Vertical scrollbar in iframe unexpectedly appears immediately after the submit button is pressed

I have designed a contact form that is displayed in an iframe within an overlay div. I have carefully adjusted the dimensions of this div to ensure that there are no scrollbars visible when the form initially appears. However, after filling out the form an ...

phpjavascripthtmlcssiframe

What is the process for downloading an image in MobileSafari?

I'm currently working on an iOS website and I am facing a challenge in retrieving recently copied images using JavaScript. When you press and hold your finger on an image within a website, a menu appears with options to either Save the image or Copy. ...

javascriptiphoneipadweb-applicationsclipboard

$cordovaSQLite.execute does not exist as a method

I am inexperienced with ionic 1 and I am trying to input data into my sqlite table using a form. However, upon clicking the submit button, an error is displayed below: TypeError: $cordovaSQLite.execute is not a function at ChildScope.$scope.insertNewI ...

angularjssqliteionic-framework

I'm baffled by the fact that my accordion won't expand or collapse

My webpage features multiple accordion items that dynamically pull information from a JSON file. Initially, everything functions flawlessly, but when utilizing the filter option, the items are correctly filtered; however, they no longer expand or collapse ...

javascripthtmlreactjsmaterial-ui

Guide to integrating jssor into an AngularJS application

Struggling to integrate jssor with angularjs, it seems to be failing because jssor is being initialized before angularjs, causing the ng-repeat elements to not resolve correctly. <div id="slider1_container"> <div u="slides"> <!-- Th ...

javascripthtmlangularjsjssor

Tips for configuring CakePHP to trigger the second submit button when the enter key is pressed

My form includes two submit buttons: "cancel" and "find." While both buttons work correctly when clicked, pressing the enter key always triggers the submission of "cancel." I don't want to change the button order in the form. To address this issue, I ...

javascriptphpformscakephp

Retrieving error message from PassportJS strategy failure in AngularJS

I am currently developing an angularJS-based application and utilizing passportjs on my nodeJS backend for authentication. Although the authentication process is functional, I am encountering some issues with error handling. One example is when there' ...

angularjsnode.jsmongodbpassport.jspassport-local

Ways to extract a Bearer Token from an Authorization Header using JavaScript (Angular 2/4)

When working with JavaScript, I have successfully implemented a method for authenticating to my server using an http post request. Upon receiving a response from the server, it includes a JWT in an Authorization header like this: Authorization: Bearer my ...

javascriptangularheaderjwt

Error message: A circular structure is being converted to JSON in Node.js, resulting in

So here is the error message in full TypeError: Converting circular structure to JSON --> starting at object with constructor 'Socket' | property 'parser' -> object with constructor 'HTTPParser' --- prope ...

javascriptnode.jsjson

Having difficulty determining the file type of a user-uploaded file on the front-end

I am looking to organize files into separate folders based on their file type using the multer module. However, I am encountering an issue where the fileType constant variable is undefined in the multer disk storage setup, even though it is correctly acces ...

javascriptnode.jsexpressmulter

Is using async/await with setState() in React.js the best approach for handling asynchronous operations?

By utilizing async and prevState, I found a solution to console.log the correct state of the page immediately after updating it. As I delved into backend development, I took the time to understand how async operations function. This led me to experiment w ...

javascriptreactjsasync-await

Tips for seamlessly creating the animation of sketching a line

Currently, I am working on a project that involves around 40 curved lines, each containing 30 to 200 points. Despite using BufferGeometry and setDrawRange() to draw all the lines equally, only the line with over 200 points appears smooth. I attempted using ...

javascriptthree.js

Javascript code for populating multiple objects with new items using a nested for loop

Trying to articulate my thoughts, I am interested in linking a list of skill sets to various individuals within their respective lists. For instance: I possess a Json object detailing individuals: "people": [ { "id": 1, "name": "Tony ...

javascriptjsonfor-loop

Steps to activate the main menu of a navigation bar after choosing a submenu:

I am currently working on a bootstrap nav bar that has main menus and submenus. I am trying to figure out how to make one of the main menus highlighted after selecting its submenu. For example, when I choose "For Shippers", I want "HOW IT WORKS" to become ...

javascriptjqueryhtmlcsstwitter-bootstrap