Angular-Translate fails to function within a tag's attribute

For my project, I utilize angular-translate. One of the key definitions looks like this:

{
"paging":{
   "first":"First",
   "last":"Last",
    "next":"Next2",
    "pre":"Previous"
   }
}

I implement it in the following way:

<uib-pagination first-text="{{'paging.first' | translate}}" 
                last-text="{{'paging.last' | translate}}"
                next-text="{{'paging.next' | translate}}"          
                previous-text="{{'paging.pre' | translate}}">
</uib-pagination>

In addition, I include

$translatePartialLoader.addPart('module');
at the beginning of the controller. However, when I run the app in the browser, it displays incorrectly like shown here: https://i.sstatic.net/cFiMo.png

Answer №1

In addition to my previous comment, it seems that using namespaces in the translate filter may not be a viable option. You can refer to a related question on Stack Overflow for more information.

One workaround is to create translations in your controller by utilizing the $translate service and then assigning those values to the $scope object. For example:

$scope.firstText = $translate.instant('paging.first');

Afterwards, you can use this in your HTML markup like so:

<uib-pagination first-text="{{ firstText }}"...

To showcase this approach, I have put together a basic plunker which you can view here.

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

The PHP Ajax code runs a for loop twice, but the data is only stored once during its execution

<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body onload="searchVideo();"> <script> var data_length = 2; for(var i=0; i<data_length; i+ ...

What is the best way to display a loading animation until the entire wizard has finished loading in the jQuery-steps

I need help with implementing a loading animation using the jQuery-steps plugin in my wizard type form. I want the animation to be displayed until the entire wizard has loaded completely, but I'm unsure of how to enable this feature as there is a labe ...

Ways to identify when an HTMLElement's size changes due to a percentage-based width setting

Currently, I am in the process of developing an Angular Component and have implemented the following CSS code: :host { display: block; width: 100%; } The main objective here is to ensure that the component remains as responsive as possible. However, ...

Unable to display information retrieved from an API within a React application

I am facing an issue with rendering questions fetched from an API. I have set up the state and used useEffect to make the API call. However, when I try to display the questions, it seems to disrupt my CSS and show a blank page. I even attempted moving the ...

Whoops! The input buffer seems to be containing an image format that is not supported while attempting to utilize Next JS next-opt

I initially used the default Image Optimization component in my Next JS app, only to realize that the site could only be hosted on Vercel and not on other web hosting platforms. This limitation prompted me to explore the next-optimized-images package, whic ...

AngularJS is displaying a blank Galleria when images fail to load

I have a code snippet similar to the following var dummyAlbum = [ {image: 'http://i.imgur.com/7Osllxil.jpg'}, {image: 'http://i.imgur.com/YACmI1G.jpg'}, {image: 'http://i.imgur.com/af4ZDy8.jpg'}, {image: &apos ...

You can embed PDF files in Internet Explorer 11 and Microsoft Edge with ease

Currently, I have a process in AngularJS where I take a base 64 encoded string representing a PDF file and convert it into a blob using the following simplified code: var base64PdfToBlob = function(b64Data: string, contentType: string) { ...

Troubleshooting: Why is $watch failing to track changes on factory variables in Angular

I have created a factory named SharedService as shown below: angular.module('Fms').factory('SharedService', function() { var userdetails=false; return userdetails; }) Below controllers utilize this factory: angular.mod ...

How to Spin an Image in the Canvas Using HTML5

I am having trouble rotating an image inside a canvas after researching similar questions on Stack Overflow. Here's what I've learned: It seems I cannot rotate a single object inside the canvas. I can only rotate the entire canvas itself. ...

Using an external variable within an internal function in TypeScript

I am facing a situation where I have a variable outside of a function that needs to be updated, but I am unable to access it using "this" as it is not reachable at that point in the code. export class GamesDetailPage { details : any = {}; type : St ...

Choose the row based on the values in the columns

I am facing a situation where I have to choose a specific row in a datatable that displays rows in groups of 10, based on the value of its column. Previously, I successfully used the following code to select the first row. myGroupTable.row(':eq(0)&ap ...

What happens when a function returns an undefined value after completing an operation?

When the getObject() function is called, it returns an undefined value. function getObject(a) { return { x : a } } console.log(getObject()); ...

How can I pass the dynamically generated ID from PHP to AJAX/jQuery using an anchor tag?

I'm seeking help with jQuery and Ajax as I am new to it. My issue is that I have multiple 'edit' buttons in a table, one for each row's data. When I click on an edit button to modify the data, they all open at once instead of just the s ...

How about adjusting this RPG Battle Sequence?

Both the client and server sides of my game are built in JavaScript. I have opted not to implement a master game loop since combat is infrequent and nothing else in the game requires one. When two players engage in combat, they enter an auto-attack loop as ...

Next.js is unable to serialize the response from getServerSideProps functions into JSON

I am currently in the process of developing a Next.js application that consists of multiple pages utilizing dynamic routing. Each page within the application involves making various axios calls to the backend using useEffect hooks. In order to enhance the ...

Moving information from two modules to the service (Angular 2)

Recently in my Angular2 project, I created two components (users.component and tasks.component) that need to pass data to a service for processing before sending it to the parent component. Code snippet from users.component.ts: Import { Component } fro ...

"Error: The $ variable is not defined" - encountered while working with a date-time picker in Jade/Pug

I am attempting to implement a date/time picker in jade/pug that resembles the example provided on this page: . I am working with a Node/express js server. However, when I click on the glyphicon-calendar icon, the calendar fails to display. I have already ...

Managing the display of an extensive list of items in react - best practices

I'm facing a challenge with performance as I have a significant number of items to render and the data is constantly being updated in real-time via socket-io. How can I optimize for performance when the table of items is being rendered frequently due ...

Transitioning from traditional Three.js written in vanilla JavaScript to React Three Fiber involves a shift in

I am currently faced with the task of converting a vanilla JS Three.js script to React Three Fiber. import * as THREE from 'three'; let scene, camera, renderer; //Canvas const canvas = document.querySelector('canvas') //Number of lin ...

Disregard any labels when it comes to clickable areas for mouse events

Here is a simple example in JSFiddle where a text is displayed over an image inside a div element. Depending on where the cursor hovers, it can exhibit three different behaviors: pointing hand over the image, allowing text selection over the content of the ...