html divを文字列にエクスポート

Question

私は角度ウィジェットを使ってダッシュボードを作成するアプリケーションを開発しています。私はそれに関連するjavaスクリプトだけでなく、私のための仕事を行うhtmlの次のコードを持っています。

<div class="page" gridster="gridsterOptions"> 
    <ul> 
     <li gridster-item="widget" ng-repeat="widget in dashboard.widgets"> 
      <div layout="row" layout-align="center center" class="box" ng-controller="CustomWidgetCtrl" ng-dblClick="openSettings(widget)"> 
      </div> 
     </li> 
    </ul> 
</div> 

ユーザーはウィジェットをページに追加できます。ユーザーが2つのウィジェットをコードに追加したときのHTMLコードを次に示します。

ユーザーが（この場合、第2のHTMLスニペットのトップdiv要素を）自分のダッシュボードページを作成しました

<div class="page" gridster="gridsterOptions"> 
    <ul> 
     <!-- ngRepeat: widget in dashboard.widgets --> 
     <li gridster-item="widget" ng-repeat="widget in dashboard.widgets" class="ng-scope gridster-item" style="margin: 0px; top: 5px; left: 5px; width: 130.167px; height: 137px;"> 
      <div layout="row" layout-align="center center" class="box ng-scope layout-align-center-center layout-row" ng-controller="CustomWidgetCtrl" ng-dblclick="openSettings(widget)" tabindex="0"> 
      </div> 
      <div class="gridster-item-resizable-handler handle-s"></div> 
      <div class="gridster-item-resizable-handler handle-e"></div> 
      <div class="gridster-item-resizable-handler handle-n"></div> 
      <div class="gridster-item-resizable-handler handle-w"></div> 
      <div class="gridster-item-resizable-handler handle-se"></div> 
      <div class="gridster-item-resizable-handler handle-ne"></div> 
      <div class="gridster-item-resizable-handler handle-sw"></div> 
      <div class="gridster-item-resizable-handler handle-nw"></div> 
     </li> 
     <!-- end ngRepeat: widget in dashboard.widgets --> 
     <li gridster-item="widget" ng-repeat="widget in dashboard.widgets" class="ng-scope gridster-item" style="margin: 0px; top: 147px; left: 5px; width: 806px; height: 705px;"> 
      <div layout="row" layout-align="center center" class="box ng-scope layout-align-center-center layout-row" ng-controller="CustomWidgetCtrl" ng-dblclick="openSettings(widget)" tabindex="0"> 
      </div> 
      <div class="gridster-item-resizable-handler handle-s"></div> 
      <div class="gridster-item-resizable-handler handle-e"></div> 
      <div class="gridster-item-resizable-handler handle-n"></div> 
      <div class="gridster-item-resizable-handler handle-w"></div> 
      <div class="gridster-item-resizable-handler handle-se"></div> 
      <div class="gridster-item-resizable-handler handle-ne"></div> 
      <div class="gridster-item-resizable-handler handle-sw"></div> 
      <div class="gridster-item-resizable-handler handle-nw"></div> 
     </li> 
     <!-- end ngRepeat: widget in dashboard.widgets --> 
    </ul> 
</div> 

は、私は彼が要求するたびに、後でそれをロードするために、サーバに文字列として、このHTMLを送信する必要がありますそれ。その背後にある理由は、実行時にウィジェットで埋められたデータでダッシュボードのスナップショットを撮りたいということです。 この点に関する助けを賜りますようお願い申し上げます。

Answer 1

innerHTMLを使用してみてください：

var content = document.querySelector('.page').innerHTML; 

ます。また、ダッシュボードの内容を復元するためにそれを使用することができます：jQueryライブラリと

document.querySelector('.page').innerHTML = content; 

Answer 2

を、これは非常に簡単に行うことができます...

// This code gets the html content from the page 
var content = $(".page").html(); 

//This code sets the html content on the page to be a bold "Hello World"... 
$(".page").html("<strong>Hello World</strong>");