AngularJS - 입력 영역의 텍스트는 어떻게 저장합니까? localStorage?

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-small-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 (좋은) :

저장 현재 메모 및 경로를 통해 액세스합니다.

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

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

: 스크립트에 ngRoute

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

하고 을 추가 한 것을 : 당신은 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 (너무 좋지 않다) :

직접 창 개체에 메모를 추가합니다.

Answer 2

로컬 저장 장치를 사용하는 데 약간 간단한 ngStorage 모듈이 있습니다. 기본적으로 데이터를 localstorage 요소에 바인딩 할 수 있습니다. 로컬 스토리지는 임시 데이터 저장을위한 솔루션 인 반면

https://github.com/gsklee/ngStorage

Answer 3

UI TinyMCE에이 브라우저에서 텍스트 편집을위한 프레임 워크입니다 ... 그들은 비교 아니에요. UI Tinymce를 편집에 사용하고 UI Tinymce에서 데이터를 저장하기위한 로컬 저장소를 사용할 수 있습니다. 로컬 저장소 (또는 클라이언트 측 저장소 솔루션)를 사용하면 브라우저 캐시/쿠키/저장소가 지워질 때까지 작동한다는 사실을 미리주의해야합니다. 웹 응용 프로그램을 만들 계획이라면 더 나은 솔루션은 대신 응용 프로그램을 제공하는 서버의 인덱싱 된 데이터베이스에 데이터를 저장하는 것입니다. 그렇게하면 사용자가 실수로 데이터를 삭제할 수 없습니다. UI Tinymce를 사용할 수도 있습니다.