AngularJS - using a Resolve to pass data to a modal

Question

Title says it all. I created a modal and I want data to pass to the modal from another page.

Here is the button that opens the open the modal. (rollup.html)

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

Here I setup up the controller and the resolve (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;

    };

});

I am not sure if I need to put this in the modal-body (stackedModal.html), or if clicking the button will pass 'test'.

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

The data I want to pass to the modal is all within Route.html. Here is apart of the page.

<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>

Any suggestions to help me accomplish this? I am new this angular js. Thanks!

UPDATE Printing the data with color and organized V

This is what opens the new tab when you click the printerFriendly button. (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>');

    }

}

I want the print preview to contain the color as seen in the main table

PortePoisse · Accepted Answer · 2017-01-26 16:51:11Z

1

You should have a variable 'test' in the dependencies of PrintViewCtrl.

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

Moreover you must have a test variable in the $scope of the "Rollup" controller. When you set "printDivModal('rollup-tab', test)" for the click, printDivModal and test are searched in the scope.

EDIT

test can be an object like

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

And then in your html use

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

for example.

answered Jan 26, 2017 at 16:51

PortePoisse

2192 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Adrew Over a year ago

When I add the test variable to the Rollup controller and refresh the page, no data appears on the page. @PortePoisse

PortePoisse Over a year ago

did you update the html with {{test.YOUR_VARIABLE}} ?

Adrew Over a year ago

I did, but I was looking deeper into it and found a potential problem. Each item has its own style so I would have to re-create all the styles and each part which may take a lot of time. There is another button in place that opens all the content that I need printed to a new window, but when I try to print what is in the new tab it shows me no print preview and prints blank. Any idea why that is?

PortePoisse Over a year ago

I have some problems to imagine what exactly you want to do ^^ I recommand you to try the different part of your code on simple example. If all works had part by part what you want to find exactly where is the problem. You post only a little part and we can't dig into all your code :p

Adrew Over a year ago

So I have a new way I am trying. I created a button that opens a new tab with all the data from the header and table. It contains color in the table that I want to show when printed. Right now when I do a print preview of the table in the new tab, it only shows in black and white and the header and table are on top of each other for some reason. I have to fix that issue as well as have the color show when printed. I was looking at PDF Make to assist me with this. I have to look more into it. Here is a link: ui-grid.info/docs/#/tutorial/206_exporting_data. Code is updated above.

Collectives™ on Stack Overflow

AngularJS - using a Resolve to pass data to a modal

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related