Google Transliterate结果未在Angular Controller中使用的范围内更新

Question

需要一些帮助将Google Transliterate与角度项目集成在一起,下面是将DOM中所有所需元素作为Transliteratable的片段.

function za() {
      google.load("elements", "1", {packages: "transliteration"});
    google.setOnLoadCallback(procTA);
}

// calls the helper function for each of input as well as textarea elememnts in the page
function procTA() {
    procTAHelp('textarea');
    procTAHelp('input');
}

// for each element of xtype (input or textarea), it creates another attribute
// whose name is <xtype><counter>id. That way each element gets a new
// attribute name (which acts as an identifier for the transliteration process
// and a flag which check whether to enable (or not) the English <-> Hindi
// transliteration change
// if gtransx is set and is "no" then nothing is done, else it enables the transliteration
// most of the remaining code is a cut-paste from the help pages for the deprecated google transliteration api

function procTAHelp(xtype) {
    var textAreaList = document.getElementsByTagName(xtype);
    for(var i = 0; i < textAreaList.length; i++) {
        var attrName = "gtransed";
        var noTrans = "gtransx";

        var taInd = i + 1;
        if((textAreaList[i].getAttribute(noTrans) == null) && (textAreaList[i].getAttribute(attrName) == null)) {
            var tcc;
            var att = document.createAttribute(attrName);
            textAreaList[i].setAttributeNode(att);
            var textAreaId = xtype.concat(taInd.toString()).concat("id");
            textAreaList[i].id = textAreaId;
            var options = {
                sourceLanguage: 'en', // destinationLanguage: ['hi','kn','ml','ta','te'],
                destinationLanguage: ['hi'],
                transliterationEnabled: true,
                shortcutKey: 'ctrl+g'
            };
            tcc = new     google.elements.transliteration.TransliterationControl(options);
            var transIdList = [textAreaId];
            tcc.makeTransliteratable(transIdList);
                    tcc.addEventListener(google.elements.transliteration.TransliterationControl.EventType.SERVER_UNREACHABLE, serverUnreachableHandler);
            tcc.addEventListener(google.elements.transliteration.TransliterationControl.EventType.SERVER_REACHABLE, serverReachableHandler);
        }
    }
}

// Handler for STATE_CHANGED event which makes sure checkbox status reflects     the transliteration enabled or disabled status.
function transliterateStateChangeHandler(e) {
}

// SERVER_UNREACHABLE event handler which displays the error message.
function serverUnreachableHandler(e) {
    document.getElementById("errorDiv").innerHTML = "Transliteration Server unreachable";
}

// SERVER_UNREACHABLE event handler which clears the error message.
function serverReachableHandler(e) {
    document.getElementById("errorDiv").innerHTML = "";
}

za();

下面是读取正在音译的特定元素的角度片段.

$scope.makePost = function() {
    setTimeout(function(){
        $scope.$apply();
        console.log($scope.newPost.text);
    }, 500);    
};

正在音译的Textarea元素.

<textarea
    ng-init="addTrnsEngine()"
    ng-trim='false'
    id="tweet"
    class="form-control primaryPostArea"
    ng-model="newPost.text"
    ng-model-options="{ debounce: 2000 }"
    placeholder="Say something...">
</textarea>

因此,一旦Google Transliterate完成其工作并更新DOM,我会尝试使用$ scope刷新范围.$ apply()超时后.所有单词都在textarea中更新为新语言,但最后输入的单词在范围内不会更新,直到模型遇到新的Character.

Answer 1

使用 contenteditable div 代替 textarea 进行输入。

contenteditable 指令是：

app.directive("contenteditable", function() {
return {
restrict: "A",
require: "ngModel",
link: function(scope, element, attrs, ngModel) {

  function read() {
    ngModel.$setViewValue(element.html());
  }

  ngModel.$render = function() {
    element.html(ngModel.$viewValue || "");
  };

  element.bind("blur keyup change", function() {
    scope.$apply(read);
  });
 }
};
});

在 div 标签中使用 contenteditable 指令：

<div contenteditable ng-model="text"></div>

以下是如何使用 contenteditable div using 指令的示例。这应该可以解决你的问题，就像它解决我的问题一样。