Pass variable values from RITM to Modal Window

YenGar · ‎10-02-2020

Hi all,

I am trying to pass the variables for an RITM to a modal window so that when the user clicks a button, they see the variables in a sort of summary table view. I get the modal to open up but I am not understanding how to pass the variable values to the modal window. Note - this is from an approval record and I am trying to access the RITM variables to show the approver before they approve the record.

This is what I currently have:

<button type="button" ng-click="c.openDetailsModal(approval.sys_id)">View</button>

client script

 c.openDetailsModal= function(id) {
       console.log(id); //this shows me the correct sys id for the approval
       c.modalInstance = $uibModal.open({
       templateUrl: 'modalTemplate',
       scope: $scope
       }); 
 }

Template - here is where I am trying to at least get the task number to show up but it doesn't

<script type="text/ng-template" id="modalTemplate">
 <div class="panel panel-default">
 <div class="panel-heading">
 <h4 class="panel-title">Modal Window {{m.task.number}}</h4>
  </div>
 <div class="panel-body wrapper-xl">
 <h4><b>{{::approval.task.cat_item}}</b></h4>
                    <h4>Summary</h4>
                    <div ng-if="approval.variables.length > 0" ng-init="variable_toggle=true">

                      <div ng-repeat="variable in approval.variables" ng-if="variable_toggle">
                        <div ng-if="variable.name.indexOf('label_') == -1 && variable.name.indexOf('x_') == -1 && variable.value != 'false'">
                          <table>
                            <tr>
                              <td><label style="color:black">{{::variable.label}}: </label></td>
                              <td><div><label style="color:gray">{{::variable.display_value}}</label></div></td>
  </tr>

  </table>
  </div>
  </div>
  </div>
 <div class="panel-footer text-right">
 <button class="btn btn-primary" ng-click="c.closeModal()">${Close Modal}</button>
  </div>
  </div>
</script>

Any suggestions on how I could do this?

Thank you!!

Yen

Justin77 · ‎10-02-2020

Ok so a couple things...

 c.openDetailsModal= function(id) {
       console.log(id); //this shows me the correct sys id for the approval
       c.modalInstance = $uibModal.open({
       templateUrl: 'modalTemplate',
       scope: $scope
       }); 
 }

When you assign the scope of the modal to "$scope", "$scope" is the widget $scope service, which we use for a multitude of things (including modals) and WOULD pull the right information for you, but because of how your server script is laid out, I assume the HTML that calls that function is within an ng-repeat. Ng-repeats actually create their own child scope, so "$scope" is actually the parent scope of the scope you are trying to read here. I recommend either utilizing the "c" object variable to pass the approval record to the modal, or pass the approval record as a parameter into the "c.openDetailsModal" function and write a "$scope.approval = [approval record function parameter name here]". If you go with the second option, I strongly recommend clearing $scope.approval once the modal closes, it helps with consistency and will save you some headache in the long run.

View solution in original post

ilam334 · ‎12-16-2020

Hi Justin,

Thanks for the quick reply.

I have limited knowledge with all these scope related stuff.

can you please help me with the code to achieve the requirement.

requirements i got:

1.when clicked on the "number" of the record, it should open model template with all the fields of the record without notes and related records tab.

Urgent requirement..

Thanks in advance..!!

regards

Nagaraju

Tony DiRienzo · ‎10-05-2020

As Justin mentioned, passing $scope in this case may not be doing what you think it is.

One possible way to work around this would be to pass specific values into the modal using the "resolve" option of the uibModal's open function. I think you will need to define the "controller" and "controllerAs" options in order to use resolve.

Here is an explanation and example of using resolve that may help:

http://brianhann.com/pass-data-to-a-ui-bootstrap-modal-without-scope/

Also, you may like to read through the uibModal official documentation. It explains all of the options that are available to the open function:

Angular directives for Bootstrap: Modal