Question

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

这是打开模态的按钮。（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）中，或者如果单击按钮将通过'test'。

<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

这是单击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>');

    }

}

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

Answer 1

你应该有一个变量＆＃39; test＆＃39;在PrintViewCtrl的依赖项中。

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

此外，你必须在＆＃34; Rollup＆＃34;的$ scope中有一个测试变量。控制器。设置＆＃34; printDivModal（＆＃39;汇总标签＆＃39;，测试）＆＃34;对于单击，在范围内搜索printDivModal和test。

修改

测试可以是像
这样的对象
$scope.test = {regionName:..., mcName:..., etc...}

然后在你的HTML使用

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

例如。

AngularJS - 使用Resolve将数据传递给模态

1 个答案: