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-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（良好）：

保存当前笔记，并通过路线访问它。你要确保ngRoute已添加到您的应用程序的模块：

angular.module('app', ['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（好）：

保存笔记作为字符串化JSON了加的window.localStorage对象。 https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

这个选项的问题是，它更容易产生陈旧的数据。

选项3（不太好）：

直接追加注到窗口对象。

Answer 2

有一个Angular模块，ngStorage使它使用本地存储简单一点 - 基本上你可以将你的数据绑定到本地存储元素。

https://github.com/gsklee/ngStorage

Answer 3

UI TinyMCE的是在浏览器中编辑文本的框架，而本地存储临时数据存储的解决方案......他们没有可比性。您可以使用UI Tinymce进行编辑，然后使用本地存储来保存UI Tinymce的数据，这可以工作。尽管应该预先警告，使用本地存储（或任何客户端存​​储解决方案）只能在清除其浏览器缓存/ cookie /存储之前运行。如果您打算制作Web应用程序，更好的解决方案就是将数据存储在为您的应用程序提供服务的服务器上的索引数据库中。这样用户不会意外删除他们的数据。你甚至可以使用UI Tinymce。