Tips for creating ui-sref links by using a mix of translate and ng-bind-html

Question

Tips for creating ui-sref links by using a mix of translate and ng-bind-html

I'm having trouble figuring out how to create a functional ui-sref link from a translated string.

Using angular 1.4.9 along with angular translate 2.9.0

Below is the relevant code snippet

<div ng-bind-html="$scope.getTranslatedText(someObject)"></div>

controller {
   function(value) {
       this.$translate.isPostCompilingEnabled(); // Returns true
       return this.$translate.instant("taskNames."+value.parameters['messageId'], value.parameters);
   }
}

The translation contains the following string.

taskInstructions{
    someMessageId: "Here is some text <a ui-sref=\"goSomewhere\">Some more text</a>"
}

The translation displays the text correctly, and without the ng-bind-html the ui-sref link is visible. However, once the ng-bind-html is added, the ui-sref disappears. I attempted to use compile, but it did not work as expected. I also tried using $sce.trustAsHtml to display the ui-sref in the HTML output, but it did not create a functional link. It seems like I am overlooking a step somewhere, unsure of how to proceed in order for the ui-sref to work as intended.

Any advice on best practices to resolve this issue?

javascript angularjs angular-translate

Answer 1

Answer №1

Instead of using the translate feature, we can leverage the $sce and $state services:

HTML

<section class="adb-layout-row" ng-repeat="post in vm.posts">
  <div class="adb-layout-default">
    <h5><a ng-click="vm.open(post)">{{ post.title }}</a></h5>
    <div ng-bind-html="post.html"></div>
  </div>
</section>

JS

$q.when(getPosts()).then(function(data) {
  vm.posts =  data.posts.map(function(post){
      return {
        title: post.title,
        html: $sce.trustAsHtml(post.description),
        url: post.url
      };
    });
});

angular.extend(vm, {
  open: function(post) {
    $state.go(post.url);
  }
});

Answer 2

Instead of using the translate feature, we can leverage the $sce and $state services:

HTML

<section class="adb-layout-row" ng-repeat="post in vm.posts">
  <div class="adb-layout-default">
    <h5><a ng-click="vm.open(post)">{{ post.title }}</a></h5>
    <div ng-bind-html="post.html"></div>
  </div>
</section>

JS

$q.when(getPosts()).then(function(data) {
  vm.posts =  data.posts.map(function(post){
      return {
        title: post.title,
        html: $sce.trustAsHtml(post.description),
        url: post.url
      };
    });
});

angular.extend(vm, {
  open: function(post) {
    $state.go(post.url);
  }
});

Tips for creating ui-sref links by using a mix of translate and ng-bind-html

Answer №1

Similar questions

Gain access to PowerBI reports effortlessly without the need to input any credentials

Leveraging Server Response Codes Across Different Domains Using JavaScript

Is there a way to apply an event function after adding elements through append?

Conceal the element if the offspring is devoid of content

Encountering errors preventing the utilization of helpers in fancybox2-rails gem

Generate an array from a string where certain words are substituted with objects featuring the correct formatting styles

Tips on updating time zone settings in a browser using React JS or JavaScript

What is the method to ensure that the Node REPL solely displays the result?

My HTML files are not getting bundled by Webpack

The resizing issue persists with Angularjs charts

Using Vue.js, pull information from a database to populate input fields using a datalist feature

Ways to circumvent route handling in Angular UI Router

Header Overflow Error Encountered in Node.js GET Request

Sending confidential data from the view to the controller without relying on form submission

How to pass the Node environment to layout.jade in Express without explicitly specifying the route

Unusual occurrences when making several ajax requests to a single URL

React is throwing an error message stating that setCount is not a valid function

Maintain authentication state in React using express-session

Scroll horizontally on a webpage using drag with JavaScript

Looking to preserve the "ALL" selection in a JavaScript-CSS filter?