ビューからスコープに動的に値を変換する

Question

ユーザーがプロフィールに表示されているセッションによってビューからすべてのメニュータイトルの言語を自動的に翻訳したいと思います。私が使用する必要があるメソッドは、私たちのPHPフレームワークにある私たちのAPIライブラリを使用することです。

は、PHPの一般的な使用では、我々は、自動的にそれが彼のプロファイル/セッションを持っているユーザーの言語にwordToTranslateの単語を翻訳します次に、このコマンド

$_lib->translate("wordToTranslate"); 

を使用して単語を翻訳します。今

、私たちは、私は、これはテンプレートからスコープを呼び出している達成するために何ができるかIONICとAngularJS、使用しているので、：コントローラで

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

を私はtranslatethis

 $scope.translatethis = function(arg) { 

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

の範囲を持っています

そして、私はこのエラーを受け取ります。

エラー：10 $ digest（）繰り返しに達しました。

それはテンプレートのように思えるが<p>{{translatethis("wordToTranslate")}}</p>

の実際の出力は、すべてのボディは、私はエラーを回避するように、この方法をしてくださいきれいにする方法を私を導くことができる得るために終了しませんか？

多くのことに感謝します。

Answer 1

問題1：補間（{{...}}）に補間するものがないように、翻訳要求は値を返しません！

問題2：あなたの翻訳リクエストは、実際の値ではなく約束を返す$httpリクエストになります。つまり、補間することはありません。

私の提案は、単語の辞書を作ってそこから行くことです。一例として、

：

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

あなたのコードに複数のエラーがあります。

機能を使用する場合は、返品する必要があります。

例：

$scope.translatethis = function(arg) { 

return "my trad"; 
} 

しかし、あなたの場合には、あなたが何かのasynchroneを構築する必要があるので、APIを呼び出す必要があります。

角度変換のような特定のモジュールを使用することをお勧めします。

カスタムソリューションを開発したい場合は、非同期関数の詳細を知る必要があると思います。このタイプの処理にはかなり良い$ filterの実装についてお勧めします。

UPDATE：

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

この

function translatethis(varToTranslate,arg) { 

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

のようなあなたの機能を変更する：あなたは、コードのこの部分を維持したい場合は

あなたがたとえば、あなたの場所は唯一のいくつかの変数をテンプレートすることができますコントローラに次のようなものを追加してください。

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

しかし、このタイプのニーズには角度翻訳を使用する方が良いと思います。