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

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?

CodePudding user response：

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.

CodePudding user response：

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>