Google音译结果未在Angular Controller中使用的作用域中更新

Question

需要一些帮助与整合谷歌音译与一个角度项目，下面是代码片段，使所有需要的元素在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>

因此，一旦谷歌音译完成了它的工作并更新了DOM，我就会在超时后尝试用$scope.$apply()来刷新作用域。所有的单词都会更新为文本区域中的新语言，但直到模型遇到新字符时，最后输入的单词才会在作用域中更新。

​

​

Answer 1

使用contenteditable div作为输入，而不是文本区域。

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 using指令的示例。这应该会解决你的问题，就像解决我的问题一样。