Google Transliterate Wynik nie aktualizowanie w zakresie stosowanych w Kątowymi Controller

Question

Potrzebujesz pomocy w integracji Google Transliterate z kątowym projektu Poniżej znajduje się fragment, który dokonuje wszelkich żądanych elementów DOM jako 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(); 

Poniżej znajduje się opis kątowy, który odczytuje określony element, który jest poddawany transliteracji.

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

Element Textarea, który jest transliterowany.

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

Więc raz Google Transliterate wykonuje swoją pracę i aktualizuje DOM, próbuję odświeżyć zakresu z zakresu $. $ Apply() po pewnym czasie na zewnątrz. Wszystkie słowa aktualizowane do nowego języka w textarea, ale ostatni wpisany słowo nie aktualizuje się w zakresie aż model napotka nową postać.

Answer 1

Użyj contenteditable div dla wejścia zamiast tekstowego.

contenteditable dyrektywy jest:

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

Użyj contenteditable dyrektywę w div tagu:

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

Here jest przykładem jak używać contenteditable div za pomocą dyrektywy. To powinno rozwiązać twój problem, ponieważ rozwiązał moje.