Geek Answers Handbook

Google Transliterate Result is not updated in use in Angular Controller

Need help integrating Google Transliterate with your angular project. Below is a snippet that does all the necessary elements in the DOM as Transliteration.

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

Below is an angular snippet that reads the specific element that is transliterated.

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

Textarea element transliterated.

 <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>

So, as soon as Google Transliterate does its job and updates the DOM, I try to update the scope using $ scope. $ apply () after timeout. All words are updated in the new language in the text box, but the last word entered is not updated in the area until the model encounters a new character.

example

+6
source share
1 answer

Use contenteditable div for input instead of textarea.

Contenteditable directive:

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

Use the contenteditable directive in the div tag:

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

Here is an example of using a contenteditable div using a directive. This should solve your problem as it solved mine.

0
source

More articles:


All Articles