Google लिप्यंतरण परिणाम कोणीय नियंत्रक

Question

में उपयोग के लिए दायरे में अद्यतन नहीं कर रहा है, एक कोणीय परियोजना के साथ Google लिप्यंतरण को एकीकृत करने में कुछ मदद की आवश्यकता है, नीचे स्निपेट है जो डीओएम में सभी वांछित तत्वों को लिप्यंतरण योग्य बनाता है।

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

तो एक बार गूगल अनुवाद कर अपने काम करता है और डोम अद्यतन करता है, मैं $ गुंजाइश के साथ गुंजाइश ताज़ा करने के लिए कोशिश कर रहा हूँ। $() लागू एक समय के लिए बाहर के बाद। सभी शब्द टेक्स्टरेरा में नई भाषा में अपडेट हो जाते हैं, लेकिन अंतिम टाइप किए गए शब्द को तब तक अपडेट नहीं किया जाता जब तक कि मॉडल एक नए चरित्र से मुकाबला न करे।

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 उपयोग करने के लिए है। इससे आपकी समस्या हल होनी चाहिए क्योंकि यह मेरा हल हो गया है।