0

タイトルはすべてです。私はモーダルを作成し、別のページからモーダルにデータを渡す必要があります。AngularJS - Resolveを使用してデータをモーダルに渡す

ここには、モーダルを開くボタンがあります。 (rollup.html)

<button id="myBtn" ng-click="printDivModal('rollup-tab', test)">Modal Test</button> 

ここに私のコントローラまでの設定と解決(rollup.js)

app.controller('Rollup', function($scope, $rootScope, $http, $uibModal, headersvc, locFiltersvc) { 
$scope.printDivModal = function(divName,test) { 
      console.log('opening pop up'); 
      var ModalInstance = $uibModal.open({ 
       scope: $scope, 
       animation: $scope.animationsEnabled, 
       templateUrl: 'app/views/modals/stackedModal.html', 
       size: 'xl', 
       controller: 'PrintViewCtrl', 
       backdrop : 'true', 

       resolve: { 
        test: function() { 

         return test; 
        } 
        } 


      }); 

     }  

}); 


app.controller('PrintViewCtrl', function($scope, $http, $rootScope, $uibModalInstance) { 
    $scope.test = function() { 
      $scope.regionName; 
      $scope.groupName; 
      $scope.mcName; 
      $scope.districtNumber; 
      $scope.routeNumber; 
      $scope.weekEndDate; 

    }; 

}); 

私はモーダル-体(stackedModalにこれを配置する必要がある場合はわかりません.html)、ボタンをクリックすると「テスト」に合格します。

<div class="modal-body"> 
    <p>{{test.regionName}}</p> 
</div> 

モーダルに渡すデータはすべてRoute.html内にあります。ここにページの一部があります。

<div class="row"> 
      <div class="col-xs-6 col-md-4"> 
       <label>Region:</label> 
       <span>{{regionName}}</span> 
      </div> 
      <div class="col-xs-6 col-md-4"> 
       <label>Group:</label> 
       <span>{{groupName}}</span> 
      </div> 
      <div class="col-xs-6 col-md-4"> 
       <label>MC:</label> 
       <span>{{mcName}}</span> 
      </div> 
      <div class="col-xs-6 col-md-4"> 
       <label>District #:</label> 
       <span>{{districtNumber}}</span> 
      </div> 
      <div class="col-xs-6 col-md-4"> 
       <label>Route #:</label> 
       <span>{{routeNumber}}</span> 
      </div> 
      <div class="col-xs-6 col-md-4"> 
       <label>Week Ending Date:</label> 
       <span>{{weekEndDate}}</span> 
      </div> 
      <div class="col-xs-6 col-md-4"> 
       <label>RSR:</label> 
       <span style="text-transform: capitalize;">{{rsrName}}</span> 
      </div> 
     </div> 

私はこれを達成するための助言がありますか?私はこの角度の新しいjsです。ありがとう!

UPDATE 色と組織化Vとのデータを印刷する

これはprinterFriendlyボタンをクリックすると、新しいタブを開くものです。 (rollup.js)

app.controller('Rollup', function($scope, $rootScope, $http, $uibModal, headersvc, locFiltersvc) { 
$scope.printDiv = function(divName) { 
     var topWrapper = "<div class='panel panel-default'><div class='panel-body'>"; 
     var bottomWrapper="</div></div>"; 
     var printContents = document.getElementById(divName).innerHTML; 
     var links = $(document).find('link'); 
     var scripts = $(document).find('script') 
     var styles = ""; 
     for (var i = 0; i < links.length; i++) { 
      styles += links[i].outerHTML; 
     } 

     var popupWin = window.open('', '_blank'); 
     popupWin.document.open(); 

     popupWin.document.write('<html><head>' + styles + '</head><body>' + printContents + '</body></html>'); 

    } 

}

は、私はあなたがPrintViewCtrlの依存関係にある変数「テスト」を持っている必要があり、メインテーブル

答えて

1

に見られるような色が含まれているために、印刷プレビューをしたいです。

app.controller('PrintViewCtrl', function($scope, $http, $rootScope, $uibModalInstance, test) 

さらに、「ロールアップ」コントローラの$範囲にテスト変数が必要です。 「printDivModal( 'rollup-tab'、test)」をクリックすると、スコープ内でprintDivModalとtestが検索されます。

EDIT

テストは

$scope.test = {regionName:..., mcName:..., etc...} 

のようなオブジェクトである。そして、あなたのhtml、例えば

{{test.regionName}} instead of {{regionName}} 

を使用することができます。

+0

テスト変数をロールアップコントローラに追加してページを更新すると、そのページにデータは表示されません。 @PortePoisse – Adrew

+0

{{test.YOUR_VARIABLE}}でhtmlを更新しましたか? – PortePoisse

+0

私はしましたが、私はそれを深く見ていて潜在的な問題を発見しました。各項目には独自のスタイルがありますので、多くの時間を要するすべてのスタイルや各部分を再作成する必要があります。新しいウィンドウに印刷する必要があるすべてのコンテンツを開く別のボタンがありますが、新しいタブにあるものを印刷しようとすると、印刷プレビューが表示されず、空白が表示されます。それがどんなアイデアなのか? – Adrew

関連する問題