Question

我最近使用this great repo on gitHub为我的 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元素的文档，但是不太了解如何应用它。

谢谢！

angular.js和jQuery mobile </option>中<option>元素内的数据绑定

0 个答案: