AngularJS-从范围加载HTML实体作为货币符号 [英] AngularJS - load HTML entity as currency symbol from scope
问题描述
我有一个处理不同货币的应用程序.我从Web服务获取货币符号，并将该符号存储在控制器的$ scope中.
I have an application that deals with different currencies. I get currency symbol from a web service and store that symbol in the controller's $scope.
$scope.symbol = '€';
当我尝试以html格式显示时，
When I try to show that in html,
这有效:
{{ 1500 | currency:"€" }}
这不起作用
{{ 1500 | currency:symbol }}
这里是一个小矮人.有什么想法吗?
推荐答案
如果要绑定html或标记，则需要使用"ng-bind-html"并将其内容标记为在控制器上受信任.我不知道如何使用胡须绑定机制来执行此操作.但这是我们需要绑定标记时一直使用的方法.
If you want to bind html or markup you need to use "ng-bind-html" and mark the content as trusted on your controller. I'm unaware of any way of how to do this with the mustache binding mechanism. But this is the approach we've been using when needing to bind markup.
- 使代码在控制器中受信任
- 将过滤器包装到自定义过滤器中-局限性在于您仍然需要ng-bind-html
以下是您可以使用的3个选项:
Below are 3 options available to you:
控制器
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope,$sce) {
$scope.nonTrustedSymbol = '€';
$scope.trustedSymbol = $sce.trustAsHtml('€');
})
.filter('currencyWithNumberFilter', ['$filter','$sce',
function ($filter, $sce) {
return function (input, curr) {
var formattedValue = $filter('number')(input, 2);
return $sce.trustAsHtml(curr + formattedValue);
}
}]
)
.filter('currencyWithCurrencyFilter', ['$filter','$sce',
function ($filter, $sce) {
return function (input, curr) {
var formattedValue = $filter('currency')(input,curr);
return $sce.trustAsHtml(formattedValue);
}
}]
);
标记
<body ng-controller="MainCtrl">
"Vanilla" controller & number filter:
<span ng-bind-html=trustedSymbol></span>{{ 1500 | number:2 }}
<br/>
Custom filter, internally making use of Number filter for formatting:
<span ng-bind-html="1500 | currencyWithNumberFilter:nonTrustedSymbol"></span>
<br/>
Custom filter, internally making use of Currency filter for formatting:
<span ng-bind-html="1500 | currencyWithCurrencyFilter:nonTrustedSymbol"></span>
</body>
工作样本
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope,$sce) {
$scope.nonTrustedSymbol = '€';
$scope.trustedSymbol = $sce.trustAsHtml('€');
})
.filter('currencyWithNumberFilter', ['$filter','$sce',
function ($filter, $sce) {
return function (input, curr) {
var formattedValue = $filter('number')(input, 2);
return $sce.trustAsHtml(curr + formattedValue);
}
}]
)
.filter('currencyWithCurrencyFilter', ['$filter','$sce',
function ($filter, $sce) {
return function (input, curr) {
var formattedValue = $filter('currency')(input,curr);
return $sce.trustAsHtml(formattedValue);
}
}]
);<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl">
"Vanilla" controller & number filter:
<span ng-bind-html=trustedSymbol></span>{{ 1500 | number:2 }}
<br/>
Custom filter, internally making use of Number filter for formatting:
<span ng-bind-html="1500 | currencyWithNumberFilter:nonTrustedSymbol"></span>
<br/>
Custom filter, internally making use of Currency filter for formatting:
<span ng-bind-html="1500 | currencyWithCurrencyFilter:nonTrustedSymbol"></span>
</body>
</html>这篇关于AngularJS-从范围加载HTML实体作为货币符号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
