如何在title标签中调用ng-bind-html渲染格式化货币值？

• ng-bind-html是AngularJS的元素指令，设计用途是替换宿主元素的innerHTML内容，不能写在双花括号插值表达式里给HTML属性赋值。你在div的title属性里写的{{ng-bind-html= 'xxx'}}属于语法误用：双花括号内是Angular表达式执行环境，这段代码实际是尝试给当前作用域的ng-bind-html变量赋值，完全不会触发指令的渲染逻辑。
• 原生HTML的title属性、以及页面<title>标签默认只渲染纯文本，既不会自动解析HTML实体（比如你定义的€），也不会自动执行Angular指令逻辑。
• span标签里的写法能生效，是因为ng-bind-html指令直接作用在span元素上时，会自动调用$sce服务完成内容安全校验、HTML实体解析，把过滤器输出的内容渲染成可见文本插入span内部，属性插值场景没有这个指令运行环境，自然无法复现效果。

前置调整 #

不需要用HTML实体存储货币符号，直接使用原生字符即可，从根源避免转义问题：

$scope.salary = 10000;
$scope.currencySymbol = '€'; // 直接赋值原生字符，无需写€实体

如果业务场景必须保留HTML实体写法，在控制器里提前解码为普通字符再参与后续逻辑即可。

普通元素title属性绑定 #

直接在插值表达式中调用currency过滤器，Angular会自动把过滤后的纯文本结果绑定到title属性上，完全不需要ng-bind-html：

<!-- 正确写法 -->
<div title="{{ salary | currency : (currencySymbol + ' ') : 0 }}">
  鼠标悬停可看到格式化后的title内容
</div>

页面<title>标签渲染 #

<title>标签位于head区域，默认不会被Angular自动接管绑定，两种方案选其一即可：

方案1：控制器内提前格式化 #

在控制器中注入$filter服务，提前生成格式化后的文本，直接赋值给页面title：

// 控制器注入$filter依赖
app.controller('demoCtrl', ['$scope', '$filter', function($scope, $filter) {
  $scope.salary = 10000;
  $scope.currencySymbol = '€';
  // 生成格式化后的薪资文本
  const formatSalary = () => $filter('currency')($scope.salary, $scope.currencySymbol + ' ', 0);
  // 监听值变化同步更新页面title
  $scope.$watch(formatSalary, (newVal) => {
    document.title = newVal;
  });
}]);

方案2：直接给title标签加ng-bind #

确保ng-app声明在html标签层级，直接给title标签用ng-bind绑定过滤后的纯文本结果即可：

<html ng-app="demoApp">
<head>
  <title ng-bind="salary | currency : (currencySymbol + ' ') : 0"></title>
</head>
<body>
<!-- 页面其他内容 -->
</body>
</html>

注意：不要在title标签上用ng-bind-html，title标签内只接受纯文本内容，ng-bind返回的纯文本结果完全满足需求，还能省掉$sce安全校验的额外开销。

内容的提问来源于stack exchange，提问作者I Love Stackoverflow