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将数据传递给模式

回答

相关问题