传递的Angular UI Modal数据为null

Question

I'm trying to get an Angular Bootstrap UI Modal (0.14) working. I can get the modal to pop up (great) but the data object I'm passing is null (it isn't null when i set it). I've looked at all sorts of plukners, which I see how they work, mine just doesn;t seem to work.

Below, I've rigged it to pass some made up data, in

            (function () {
                'use strict';
                angular.module('MPAapp')
                    .controller('workCentreCtrl',
                                ['$scope', '$rootScope', 'toastrFactory', 'workCentreResource', '$uibModal', '$log',
                                 workCentreCtrl])

                function workCentreCtrl($scope, $rootScope, toastrFactory, workCentreResource, $uibModal, $log) {
                    var scope = this;

                    var slot = [{'slot1':5}, {'slotname':'dynamo'},{'OriginalSlot':5}]
                    var max = 5

// Click event from the view
                    $scope.EditWorkOrder = function () {                                    
                        var modalInstance = $uibModal.open({
                            animation: true,
                            templateUrl: '/app/WorkOrder/Views/EditWorkOrder.html',
                            controller: 'EditWorkOrderCtrl',
                            size: 'lg',
                            resolve: {
                                data:  function () {
                                    return{
                                        Slot: slot,
                                        Max: max
                                    }                    
                                }
                            }
                        });

                        modalInstance.result.then(function () {
                            $log.info('do some UI update here');
                        }, function () {
                            $log.info('Modal dismissed at: ' + new Date());
                        });

                    };
                }

            }());
            /* END PARENT CONTROLLER */

            /* --------------------------------*/

            /* MODAL INSANCE CONTROLLER BEGIN*/

            (function () {
                'use strict';
                angular.module('MPAapp')
                    .controller('EditWorkOrderCtrl', ['$scope', '$timeout', 'toastrFactory',
                        EditWorkOrderCtrl]);

                EditWorkOrderCtrl.$inject = ['$uibModalInstance', 'data']

                function EditWorkOrderCtrl($scope, $timeout, toastrFactory,  $uibModalInstance, data) {
                    var scope = this;

                    $scope.ok = function () {
                        $uibModalInstance.close(scope.Slot);
                    };

                    $scope.cancel = function () {
                        $uibModalInstance.dismiss('cancel');
                    };
                    // THIS IS WHEN DATA IS UNDEFINED.
                    scope.Slot = data.Slot;
                    scope.SlotNumber = data.Slot.OriginalSlot;
                }
            }());

And the HTML in the modal instance

<div ng-controller="EditWorkOrderCtrl as vm">
    <div class="row">
        <div class="col-md-12">
            <h2>Edit Work Order {{vm.Slot.WorkOrderNumber}}</h2>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12"><span class="main-text bold">Product:</span> {{vm.Slot.ProductCode}} -  {{vm.Slot.ProductDescription}}</div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <span class="main-text bold">Size:</span> {{vm.Slot.QuantityRequired}}
            <span class="main-text bold">Time (mins):</span> {{vm.Slot.StandardRunTime}}
            <span class="main-text bold">Current Date:</span>{{vm.Slot.OriginalOrderDate | date:'dd MMM yyyy'}}
        </div>
        <div class="col-md-6"></div>
    </div>
</div>

Any help very much appreciated. I'm still quite new to Angular, it's proving a tough nut in some areas, but I love it!

Answer 1

Of course data is not going to be available like this (but it's not null , it's undefined ). Your dependency injection is messed up. Note, that what you are describing in $inject array, must correspond to formal parameters passed to controller function.

In your case with this configuration:

EditWorkOrderCtrl.$inject = ['$uibModalInstance', 'data']
function EditWorkOrderCtrl($scope, $timeout, toastrFactory,  $uibModalInstance, data) {}

you tell Angular to inject $uibModalInstance as $scope , and data as $timeout . Clearly not what you want.

Correct injection should look like

EditWorkOrderCtrl.$inject = ['$scope', '$timeout', 'toastrFactory',  '$uibModalInstance', 'data'];
function EditWorkOrderCtrl($scope, $timeout, toastrFactory,  $uibModalInstance, data) {}

Alternatively you can use array notation as controller definition:

.controller('EditWorkOrderCtrl', ['$scope', '$timeout', 'toastrFactory', 'workCentreResource', 'blockedDatesResource', 'data', EditWorkOrderCtrl]); 

but in this case make sure you don't use EditWorkOrderCtrl.$inject = ['$uibModalInstance'] . Remove it because it has higher priority and as I explained above it's messed up.

Also take a look at this answer , where I provided detail explanation about different injection methods.