AngularJS'编译器'负载时不会将跨度放入角度平移字符串中

Timing of AngularJS 'compiler' at load does not put a span into an angular-translate string

本文关键字：字符串 负载 编译器 AngularJS      更新时间：2023-09-26

我有一个包含表单的Angular部分页面。在其中一个输入标题中，我想显示基于所选国家的货币。货币符号位于通过角度转换加载的JSON字符串内的跨度中。在分部的页面加载中，输入标题中不显示货币符号。如果用户更改国家/地区，则该国家/地区的货币符号将显示在标题中。以下相关代码的一些时间问题：

HTML

<label for="price" translate>PRICE</label>
<input type="text" id="price" name="price" data-ng-model="cntrl.input.price" size="12" maxlength="12" />

英文翻译的JSON字符串

"PRICE": "Price <span id='currencySymbol'></span><span class='required'>(Required)</span>"

角度控制器-使用John Papa的控制器风格指南作为

function InputFormController( $translate, $translatePartialLoader, selectCountryTranslateFactory, $timeout, $scope ) {
var cntrl = this;
cntrl.input = {};
//set country in select tag for page load
cntrl.input.countrySelected = "US";
$scope.$watch( "cntrl.input.countrySelected", function( newVal, oldVal ) { 
    setCurrencySymbol( cntrl.input.countrySelected ); //TEST
});
function setCurrencySymbol() { //TEST
    var targetSpan = document.getElementById( "currencySymbol" );
    switch ( cntrl.input.countrySelected ) {
        case 'US':
            targetSpan.innerHTML = " $"; //Error: targetSpan is null - on page load, but displays symbol after user selects a different country
        break;
        case 'CA':
            targetSpan.innerHTML = " C$";
        break;
        default:
            //show no symbol
            targetSpan.innerHTML = "";
        break;          
    }
}

需要明确的是，我在页面加载时得到了价格（必需），美国是默认国家。如果我换到加拿大，我会得到价格C$（必需）如果我换回美国，我会获得价格$（必需的）

我使用的是Angular 1.3.7如何在角度转换加载后加载跨度？或者有其他方法可以制作setCurrencySymbol函数吗？

我相信这个问题的核心在AngularJS中，但我没有能力修复它（或证明它是一个bug）。我采取了一种不同的方法，从翻译JSON字符串中删除了currencySymbol跨度。我在输入框中添加了第二个标签标签。我以为这是一个包，但令我惊讶的是，W3C将其验证为无错误的HTML。多个标签是可以的。所以在删除跨度后，一行HTML就会改变，它就可以工作了。

<label for="monthlyRental" id="currencySymbol" class="boldHeading"></label><label for="monthlyRental" class="boldHeading" translate>PRICE</label>

在页面加载时，我现在得到$Price（必需）。货币符号随着用户选择不同的国家/地区而变化。货币符号也可以通过更改标签的顺序放置在标题的末尾。但这种方法不会将货币符号放在字符串的中间。对AngularJS有一些非常深入的了解是必要的。

相关文章：