Wert dynamisch von der Ansicht in den Bereich konvertieren

Question

Ich möchte die Sprache jedes Menütitels aus der Ansicht von einer Sitzung automatisch übersetzen, die Benutzer in seinem Profil haben. Die Methode, die ich verwenden muss, ist mit unserer API-Bibliothek, die wir in unserem PHP-Framework haben.

Im allgemeinen Sprachgebrauch von PHP, werden wir ein Wort mit diesem Befehl

$_lib->translate("wordToTranslate"); 

übersetzen Dann automatisch wird es das Wort wordToTranslate in die Sprache des Benutzers hat in seinem Profil/session übersetzen.

Jetzt, da wir Ionen- und AngularJS verwenden, was ich kann dies tun zu erreichen, ist durch einen Umfang von Vorlage Aufruf:

<p>{{translatethis("wordToTranslate")}}</p> 

In Controller habe ich einen Umfang von translatethis

 $scope.translatethis = function(arg) { 

     $http.post("http://example.com/API?Word=arg&Lang=1").success(function(response) { 
      console.log(response); 
     }); 
    } 

Und ich bekomme diesen Fehler

Fehler: 10 $ Digest() Iterationen erreicht.

Es scheint, wie die Vorlage fertig nie die reale Ausgabe der <p>{{translatethis("wordToTranslate")}}</p>

erhalten Kann jede Stelle mich führen, wie diese Methode zu reinigen, bitte, so dass ich den Fehler zu vermeiden?

Vielen Dank im Voraus

Answer 1

Problem 1: Ihre Übersetzungsanforderung gibt keinen Wert zurück, so dass die Interpolation ({{...}}) nichts zu interpolieren hat!

Problem 2: Ihre Übersetzungsanforderung erstellt eine $http Anfrage, die ein Versprechen zurückgibt, keinen tatsächlichen Wert! Dies bedeutet, dass Sie nichts zu interpolieren haben.

Mein Vorschlag ist, ein Wörterbuch der Wörter zu machen und von dort zu gehen.

Als Beispiel:

// Create some dictionaries 
$scope.translatedWords = {}; 
$scope.requestedWords = {}; 

$scope.translatethis = function(arg) { 
    if ($scope.translatedWords[arg]) { 
     // We have already translated this word, return it 
     return $scope.translatedWords[arg]; 
    } else { 
     if (!$scope.requestedWords[arg]) { 
      // We need to request the word 
      // Setting this stops us from making multiple requests while the request gets resolved. 
      $scope.requestedWords[arg] = true; 
      requestTranslation(arg); 
     } 
     return ''; 
    } 
} 

// Has no need to be on $scope as it's a private function 
function requestTranslation(arg) { 
    $http.post("http://example.com/API?Word=arg&Lang=1").success(function(response) { 
     console.log(response); 
     // Store the result of the translation into our map 
     $scope.translatedWords[arg] = response.data; 
    }); 
} 

Answer 2

Es gibt mehrere Fehler i Ihren Code.

Wenn Sie eine Funktion verwenden, benötigen Sie eine Rückgabe.

Beispiel:

$scope.translatethis = function(arg) { 

return "my trad"; 
} 

Aber in Ihrem Fall benötigen Sie eine api nennen, so dass Sie etwas asynchron bauen müssen.

Der beste Weg, um Ihren Bedarf zu vervollständigen, ist ein bestimmtes Modul wie angular-translate zu verwenden.

Wenn Sie eine benutzerdefinierte Lösung entwickeln möchten, denke ich, dass Sie mehr über asynchrone Funktion lernen müssen, und ich schlage vor, Sie $ Filter-Implementierung zu betrachten, die für diese Art der Behandlung ziemlich gut ist.

UPDATE:

Wenn Sie diesen Teil des Codes halten Sie zum Beispiel Platz kann auf nur einige variable Vorlage:

<p>{{wordToTranslate}}</p> 

und Ihre Funktion ändern wie diese

function translatethis(varToTranslate,arg) { 

    $http.post("http://example.com/API?Word=arg&Lang=1").success(function(response) { 
     console.log(response); 
varToTranslate = response.data 
    }); 
} 

Und fügen Sie auf Ihrem Controller etwas wie

translatethis($scope.wordToTranslate,"wordToTranslate"); 

Aber ich denke, es ist besser, angular translate für diese Art von Bedürfnissen zu verwenden.