AngularJS - 入力領域からテキストを保存するにはどうすればよいですか？ローカルストレージ？

Question

だから私はユーザーのメモ領域を追加しています。ユーザーは必要なものを入力して保存することができます。保存はリセットされた入力領域を除き、ページ全体で機能します。私が考えることができる唯一の他のものはui-tinymceまたはlocalStorage ??どちらの方法で入力領域divを保存して保存するかについての入力はありますか？また、特定の注文に関連するため、同じページで行う必要があります。各注文は入力エリアに異なるメモを持ちます。

HTML

<div ng-if="'confirmation' != page && editable" class="col-xs-12 col-md-6"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h3>Notes</h3> 
     </div> 
     <div class="panel-body"> 
      <div align="center"> 
       <input placeholder="Notes" ng-model="myNotes.notes" class="notes"> 
      </div> 
     </div> 
    </div> 
</div> 

JS

$scope.myNotes = {}; 

更新：私はこの問題に多くを追加してみましょう。だから私はそれを働かせました、種類の、私は正常にポストコールで私の 'ui - tiny - mce'を保存することができます。私は 'ui-tiny-mce'からテキストを保存している作業ページの下に投稿します。今問題は、テキストを保存することです。ただし、各注文には「ui-tiny-mce」ボックスがあり、保存すると、すべての注文ページのすべての「ui-tiny-mce」ボックスに同じデータが保存されます。

HTML

<div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h3 class="panel-title">Notes <button ng-click="saveNotes()">Save Notes</button></h3> 
      </div> 
      <div class="panel-body"> 
       <div class="form-group"> 
        <textarea ui-tinymce="tinymceOptions2" ng-model="myNotes.notes"></textarea> 
       </div> 
      </div> 
     </div> 

JSコントローラー

$scope.myNotes = {}; 
    $scope.saveNotes = function() { 
     $http.post('api/settingsController.php/write',$scope.settings).success(function() { 
      toastr.success('Notes Saved'); 
     }); 
    }; 

PHP

$app->post('/write', function(\Symfony\Component\HttpFoundation\Request $request) use ($app) { 
$document = json_decode($request->getContent(), true); 
unset($document['_id']); 

$document['sid'] = $_SESSION['sid']; 
$app['mongoOrders']->update(['sid'=>$_SESSION['sid']], $document, ['upsert'=>true]); 

return $app->json($document);}); 

Answer 1

だから、あなたも、ページを更新した後にデータを保持したい場合、あなたはいくつかのオプションがあります。

オプション1（良）：

保存現在のノート、およびルート経由でアクセスします。

angular.module('app', ['ngRoute']); 

、あなたのスクリプトにngRouteを追加しましたこと：あなたはngRouteアプリのモジュールに追加されていることを確認したいと思う

<script src="path/to/angular-route.js"></script> // must be loaded in after angular.js 

https://docs.angularjs.org/api/ngRoute

を入力して、設定にルートを追加します。 https://docs.angularjs.org/api/ngRoute/provider/ $ routeProvider

オプション2（大丈夫）：

保存window.localStorageオブジェクトに追加されます文字列化JSONなどのノート。 https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

このオプションの問題は、古くなったデータがある可能性が高いことです。

オプション3（あまり良くない）：

直接windowオブジェクトにメモを追加します。

Answer 2

ngStorageというAngularモジュールがあり、ローカルストレージを使用するのが少し簡単になりました。基本的には、ローカルストレージエレメントにデータをバインドすることができます。

https://github.com/gsklee/ngStorage

Answer 3

UI TinyMCEのローカルストレージは、データの一時保存のためのソリューションです...彼らは比較にならないしている間、ブラウザでテキスト編集するためのフレームワークです。 UI Tinymceを編集に使用し、ローカルTinymceを使用してUI Tinymceからデータを保存することもできます。ローカルストレージ（またはクライアント側のストレージソリューション）を使用することは、ブラウザのキャッシュ/クッキー/ストレージが使用されるまで動作することに注意してください。 Webアプリケーションの作成を計画している場合、より良い解決策は、代わりにアプリケーションを提供しているサーバー上のインデックス付きデータベースにデータを格納することです。そうすれば、ユーザーは誤ってデータを削除することはできません。 UI Tinymceを使用することすらできます。