Question

我试图让Angular Bootstrap UI模式（0.14）正常工作。我可以弹出模式（很棒）但是我传递的数据对象是空的（当我设置它时它不是空的）。我看过各种各样的羽毛球，我看到它们是如何起作用的，我的看起来并没有起作用。

下面，我在

中修改了它以传递一些补偿数据

            (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，其中我提供了有关不同注射方法的详细说明。

传递的角度UI模态数据为空

1 个答案: