How to call this "`ng-bind-html`" inside "`title`" tag?

Question

I am trying to use "ng-bind-html" directive inside "title" tag to render currency value with currency symbol but the expression is not evaluating.

This is how I am tring:

$scope.salary= 10000;
$scope.currencySymbol = '&#8364;';//€
<div title="{{ng-bind-html= 'salary |currency:(currencySymbol+' '): 0'}}"> //This is not working
<span ng-bind-html="salary |currency:(currencySymbol+' '): 0"> </span> //working fine and renders €10000

Its working fine when I display inside <span> tag but I want to display the same formatted value in <title> tag as well.

So wondering how to call this "ng-bind-html" inside "title" tag to display the same output as it is in <span> tag?

bind-html is used to bind the value of the element, not attribute. Use a function or variable for the title attribute, function most likely better — Huangism, Jun 30 '22 at 19:29
@Huangism I tried using a function nd called $sce,trustashtml function but not getting the desired output. — I Love Stackoverflow, Jun 30 '22 at 22:06
Make sure the string in the attribute does NOT have html code in it — Huangism, Jul 01 '22 at 12:42

score 3 · Answer 1 · answered Jul 06 '22 at 21:43

ng-bind-html is a directive. Curly braces are for expressions. A directive will not be processed from within an expression.

Rewrite your expression as follows:

<div title="{{ salary | currency:currencySymbol: 0}}"></div>

and replace your currencySymbol value with the desired string for the currency prefix. $scope.currencySymbol = "€ ";

Here is a working plunkr

Additional documentation on the currency filter

Related documentation on expressions

If you are truly fixated on processing your currency symbol dynamically and treating it as html, you will need to write a custom currency filter which accepts an sceHtmlString. Javascript strings support unicode, so your provided use-case does not appear to require this.

score 1 · Answer 2 · answered Jul 07 '22 at 19:38

Try this you can add title to div. But it will not be visible as title is not a text field.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-sanitize.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<div ng-bind-html="myText"></div>
 <span>Currency Example:</span>
      <div> {{ salary | currency:currencySymbol: 0}} </div>
       <div title=" {{ salary | currency:currencySymbol: 0}}"> nodata</div>
     <span>Currency Example ng-bindhtml</span>
     <span ng-bind-html="myText"></span>
     <p ng-bind-html="myText"></p>
    </div>
</div>

<script>
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
    $scope.myText = "My name is: <h1>  111 John Doe</h1>";
     $scope.salary = 10000;
   $scope.salaryhtml = "<p> €10000 </p>";
  $scope.currencySymbol = "€";
  $scope.myText ="  <h1>$ 1000 </h1>";
});
</script>



</body>
</html>

How to call this "`ng-bind-html`" inside "`title`" tag?

2 Answers2