AngularJS - 使用Resolve將數據傳遞給模式

標題說明了一切。我創建了一個模式，我希望數據從另一個頁面傳遞給模態。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>'); 

    }

}

我想打印預覽包含的顏色作爲主表

來源

2017-01-26 Adrew

您應該具有PrintViewCtrl的依賴關係的變量「測試」見過。

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

此外，您必須在「彙總」控制器的$範圍內有一個測試變量。當您爲點擊設置「printDivModal（'rollup-tab'，test）」時，將在範圍內搜索printDivModal和test。

編輯

測試可以像

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

和對象，然後在你的HTML中使用

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

例如。

來源

2017-01-26 16:51:11 PortePoisse

當我將測試變量添加到Rollup控制器並刷新頁面時，頁面上不顯示數據。 @PortePoisse – Adrew

是否用{{test.YOUR_VARIABLE}}更新了html？ – PortePoisse

我做過了，但是我正在更深入地研究它，發現了一個潛在的問題。每個項目都有自己的風格，所以我將不得不重新創建所有樣式和每個可能需要很長時間的部分。還有另一個按鈕可以打開我需要打印到新窗口的所有內容，但是當我嘗試打印新選項卡中的內容時，它不會顯示打印預覽並打印爲空白。任何想法，爲什麼？ – Adrew

AngularJS - 使用Resolve將數據傳遞給模式

回答

相關問題