1

I have a form where you can create patient. On that form I have an input box for assigning devices and a button to open a pop-up where list of devices are presented. I have a button for each device in the list. When I click on one of the devices in list, I want the device number to printed on the input box on the patient creation page.

First, the patient creation page

enter image description here patient creation controller code -

    $scope.openDeviceModal = function () {

            var notifyModalInstance = $uibModal.open({
                size: 'sm',
                component : 'deviceModalComponent'
            });
            notifyModalInstance.result.then(function (result) {
               alert(result);
            });
        }

Once clicked on select device, modal is opened. This is how it looks

enter image description here

I have the html and controller file 

<table>
<thead>
 <tr><th>Device Serial number</th></tr>
   <tr><th>Status</th></tr>
     <tr><th>Action</th></tr>
 </thead> 
 </table>

 <table class="table table-inverse">
            <tbody>

            <tr ng-repeat="device in devices">
                <td width="12%" ><span>{{device.deviceSerialNumber}}</span>
    </td>
                <td width="10%" ><span>{{device.assignmentStatus}}</span>
      </td>
                <td width="12%">
                    <button type="submit" class="btn btn-primary pull-right"
                            ng-click="selectThisDevice(device);"><span 
            title="Select Device"

          class="glyphicon glyphicon-plus"></span> Assign
                    </button>

                </td>
            </tr>
            </tbody>
        </table>

The controller has one function selectThisDevice

 define([], function () {

'use strict';

var deviceModalComponent = {
    templateUrl: 'views/components/patient/create/deviceModal/deviceModal.html',

    controller: [
        '$scope',
        'AuthService',
        'DeviceDataService',
        'device_map',
        '$rootScope',

        function ($scope, AuthService, DeviceDataService, device_map, 
   $rootScope,  $uibModalInstance) {

            $scope.selectThisDevice = function (device) {
                console.log("Device Info ------"+JSON.stringify(device));
                $uibModalInstance.close(device.deviceSerialNumber);
            }


   }
    ]
    }
    return deviceModalComponent;

 });

When I log the device object in the function, it looks fine. But for close method it says "Cannot read property 'close' of undefined". I want to send the device serial number back to the patient creation controller. I am new this. Can someone help me thanks

chan
  • 274
  • 1
  • 5
  • 24
  • You're missing the `$uibModalInstance` DI annotation. Add `'$uibModalInstance',` between `'$rootScope'` and `function`. Voting to close as a typo – Phil Oct 11 '17 at 01:18
  • @Phil It gives me unknown provider: $uibModalInstanceProvider – chan Oct 11 '17 at 03:13
  • Seems when using a component, you should use the `modalInstance` binding. Even then, looks like you'll want to directly use the `close` binding. I suggest you have a look at the examples in the documentation ~ https://angular-ui.github.io/bootstrap/#!#modal – Phil Oct 11 '17 at 04:14

0 Answers0