角度$スコープ変数が更新されない

Question

私の考えでは、スコープ変数$scope.letter_contentを定義します。ビューがロードされると、データベースから文字列をロードし、$scope.letter_contentに設定します。次に、私は使用しているテキストエディタ（Froala）を作成します。だから、基本的に私は、テキストエディタのためのNG-モデルとしてletter_contentを設定

{{letter_content}} 
    <div ng-if="formData['page_number'] == 1 "> 
     {{letter_content}} 
     <textarea id="froala-sample-2" froala="froalaOptions" ng-model="letter_content"></textarea> 
    </div> 

：

は、以下のビューのためのコードです。テキストエディタを変更すると、値$scope.letter_contentが変更されます。

テキストエディタのテキストを変更すると、div内に{{letter_content}}が変更されてしまいました。ただし、divの外に{{letter_content}}は更新されません。

テキストエディタのテキストの編集が完了したら、データベースの値を$scope.letter_contentに更新するためにputリクエストを送信します。しかし、最終的にコンテンツを更新しないdivの外側に{{letter_content}}が送信されてしまいます。

なぜこの奇妙なことが起こっていますか？

Answer 1

実際これは、より多くのリンクで議論されています。

プリミティブ型変数は使用しないでください。代わりに、スコープ内のオブジェクトを使用します。

は例えば、 が、これはすべてのビューに反映されますので、object.primitiveVarialeようなビューを使用してこの$scope.object={primitiveVariale:null}

の代わりに$scope.primitiveVarialeのように使用しないでください。以下のリンクをご覧ください。

https://github.com/angular/angular.js/wiki/Understanding-Scopes

Answer 2

ng-ifディレクティブは、新しいスコープを作成するので、div内部letter_contentはng-if範囲内にあるが、letter_content外部コントローラの範囲内にあります。

どのディレクティブが新しい​​スコープを作成するのかを知るには、APIのドキュメントを読んでください。この種の問題を回避するために

はあなたが角度のdot notationのことを聞いたことができcontrollerAs syntax

Answer 3

の使用を検討しますか？

ソリューション

は、オブジェクトにletter_contentを置きます。例えば、froalaDetails.letter_contentである。その値を更新すれば、すべてがあなたの望む通りに動作するはずです。

説明

完全な詳細を取得するには、この非常に短いビデオを見る：https://egghead.io/lessons/angularjs-the-dot

Answer 4

は、このようなプレーンな値を使用しないでください、あなたはオブジェクトにこのような値を置くので、あなたのコントローラにしようとする必要があります。

$scope.obj = { letter_content: null}; 

、その後、あなたのビューで：

{{obj.letter_content}} 

Answer 5

これを試してみてください -

$scope.object = {letter_content:null}; 

    {{object .letter_content}} 
    <div ng-if="formData['page_number'] == 1 "> 
     {{letter_content}} 
     <textarea id="froala-sample-2" froala="froalaOptions" ng-model="object .letter_content"></textarea> 
    </div> 

Answer 6

私は非常に似ていたが、私は別のHTTP呼び出しを行う場合を除き、私はHTTP呼び出しからの応答を使用して、私のscope変数のいずれかをアップデートしても奇妙な問題は、意外にも、私の見解では更新されませんし、別の意味では、他のランダムなHTTP呼び出しを意味します。 $applyを使用して

が私のために働いた、

$scope.$apply(function() { 
    $scope.resultData.totalResults = response.data.total; 
});