Angular UI 传递的模态数据为空

Question

我正在尝试让 Angular Bootstrap UI 模式 (0.14) 正常工作。我可以让模式弹出（很好）但是我传递的数据对象是空的（当我设置它时它不是空的）。我看过各种各样的 plukners，我知道它们是如何工作的，我的似乎不起作用。

下面，我将其设置为传递一些虚构的数据，在

            (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;
                }
            }());

和模态实例中的HTML

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

非常感谢任何帮助。我对 Angular 还是很陌生，它在某些方面被证明是一个棘手的问题，但我喜欢它！

Answer 1

当然 data 不会像这样可用（但它不是 null，它是 undefined）。你的依赖注入搞砸了。请注意，您在 $inject 数组中描述的内容必须与传递给控制器函数的形式参数相对应。

在您的配置中：

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

你告诉 Angular 将 $uibModalInstance 注入为 $scope，将 data 注入为 $timeout。显然不是你想要的。

正确的注入应该是这样的

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

或者，您可以使用数组表示法作为控制器定义：

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

但在这种情况下，请确保不要使用 EditWorkOrderCtrl.$inject = ['$uibModalInstance']。删除它，因为它具有更高的优先级，正如我上面解释的那样，它已经搞砸了。

另请查看此 answer，我在其中提供了有关不同注入方法的详细说明。

Angular UI 传递的模态数据为空

Angular UI Modal data passed is null

javascript

angularjs

angular-ui-bootstrap