1

我最近使用gitHub 上的这个很棒的 repo为我的jQuery-mobile/PhoneGap应用程序添加了多语言支持。

它使用firebase和angular.js将我的应用程序中所有与语言相关的标签和文本绑定到当前选择的语言，如下例所示：

<h2>{{getWord("SELECTION_CRITERIA")}}</h2>

但是，我的应用程序中有一些与语言相关的文本不能简单地绑定到语言数据，到目前为止我发现了这一点：

<select id="sel" data-role="slider">
    <option value="off">{{getWord("SELECT_OFF")}}</option>
    <option value="on">{{getWord("SELECT_ON")}}</option>
</select>

该<option>元素不允许将其文本绑定到数据（呈现的文本为空）。我不知道为什么。我试图测试这样的事情是否可行：

<option value="off">{{1+2}}</option>

是的，它在滑块中显示数字 3。

angular.js 部分如下所示：

function LanguageCtrl($scope) {

    $scope.words = JSON.parse('{}');

    $scope.addWord = function(Name, Value) {
        $scope.words[Name] = Value;
    };

    $scope.getWord = function(Name) {
        return $scope.words[Name];
    };
}

var ref;
var refLang;
var onLangChange;

$(document).on("pageinit", "#mainPage", function(event) {
    ref = new Firebase('https://username.firebaseio.com/');
    ChangeLangTo("En"); //default lang
});

function ChangeLangTo(lang) {
    if (onLangChange !== undefined && onLangChange !== undefined) {
        refLang.off('child_changed', onLangChange);
    }

    refLang = ref.child(lang);

    //reading once all words
    refLang.once('value', function(dataSnapshot) {
        var lang = dataSnapshot.val();
        angular.element($("#mainPage")).scope().$apply(function(scope) {
            $.each(lang, function(key, value) {
                scope.addWord(key, value);
            });
        });
    });

    //listening to changes
    onLangChange = refLang.on('child_changed', function(childSnapshot, prevChildName) {
        angular.element($("#mainPage")).scope().$apply(function(scope) {
            scope.addWord(childSnapshot.name(), childSnapshot.val());
        });
    });

解析为该变量的来自 firebase 的 JSON 非常简单，例如：

{
    "Cz": {
        "SELECT_ON":"Ano",
        "SELECT_OFF":"Ne"
    },

    "En": {
        "SELECT_ON":"On",
        "SELECT_OFF":"Off"
    }
}

我认为该<button>元素也不起作用。还有一些通过属性设置元素文本的情况，比如这种情况：

<ul data-filter-placeholder="Search items..."></ul>

我也想让这项工作：

<ul data-filter-placeholder="{{getWord("SEARCH_ITEMS")}}"></ul>

我对 angular.js 很陌生，有人可以解释一下如何使这项工作吗？我已经阅读了一些关于带有角度数据绑定的 HTML SELECT 元素的文档，但不太了解如何应用它。

谢谢！

4

0 回答 0