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

Question

在将 Google Transliterate 与 Angular 项目集成方面需要一些帮助，下面是使 DOM 中的所有所需元素都可音译的代码段。

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();

下面是读取正在音译的特定元素的 Angular 片段。

$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() 刷新范围。文本区域中的所有单词都会更新为新语言，但最后输入的单词不会在范围内更新，直到模型遇到新字符。

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>

Here是如何使用指令使用 contenteditable div 的示例。这应该可以像解决我的问题一样解决您的问题。