AngularJS - 使用 Resolve 将数据传递给模式答案

【问题标题】：AngularJS - using a Resolve to pass data to a modalAngularJS - 使用 Resolve 将数据传递给模式
【发布时间】：2017-01-31 23:38:25
【问题描述】：

标题说明了一切。我创建了一个模态，我希望数据从另一个页面传递给模态。

这是打开打开模式的按钮。 (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。谢谢！

更新用颜色和有组织的V打印数据

这是当您单击打印机友好按钮时打开新标签的内容。 (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>');

    }

}

我希望打印预览包含主表中显示的颜色

【问题讨论】：

标签： javascript html angularjs twitter-bootstrap bootstrap-modal

【解决方案1】：

您应该在 PrintViewCtrl 的依赖项中有一个变量“test”。

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

此外，您必须在“汇总”控制器的 $scope 中有一个测试变量。当您为点击设置“printDivModal('rollup-tab', test)”时，会在范围内搜索printDivModal和test。

编辑

test 可以是像

这样的对象

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

然后在你的html中使用

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

例如。

【讨论】：

当我将测试变量添加到 Rollup 控制器并刷新页面时，页面上没有出现任何数据。 @PortePoisse
你用 {{test.YOUR_VARIABLE}} 更新了 html 吗？
我做了，但我更深入地研究它并发现了一个潜在的问题。每个项目都有自己的风格，所以我必须重新创建所有的风格和每个部分，这可能需要很多时间。还有一个按钮可以打开我需要打印到新窗口的所有内容，但是当我尝试打印新选项卡中的内容时，它显示没有打印预览并打印为空白。知道为什么会这样吗？
我很难想象你到底想做什么^^我建议你在简单的例子中尝试你代码的不同部分。如果所有的作品都有一部分，你想找出问题到底出在哪里。您只发布了一小部分，我们无法深入研究您的所有代码：p
所以我尝试了一种新方法。我创建了一个按钮，用于打开一个新选项卡，其中包含标题和表中的所有数据。它包含表格中我想在打印时显示的颜色。现在，当我在新选项卡中对表格进行打印预览时，它仅以黑白显示，并且由于某种原因，标题和表格彼此重叠。我必须解决这个问题并在打印时显示颜色。我正在查看 PDF Make 来帮助我解决这个问题。我必须更多地研究它。这是一个链接：ui-grid.info/docs/#/tutorial/206_exporting_data。代码在上面更新。