javascript - 在指令中使用 $uibModalInstance

Question

当打开一个 bootstrap ui modal 时，如果你更喜欢使用指令，而不是单独使用 templateUrl 和 controller，那么你怎么能在指令的 Controller 中对于模式，访问 $uibModalInstance 以关闭模式或您需要做什么？此外，我们如何传递 items 而不必将其作为属性添加到模板中？

angular.module('myModule', ['ui.bootstrap'])
.directive('myDirective', ['$timeout', function ($timeout) {

    var controllerFn = ['$scope', '$uibModal', function ($scope, $uibModal) {

            $scope.names = ['Mario','Wario','Luigi'];

            $scope.openModal = function () {
                var modalInstance = $uibModal.open({
                    animation: true,
                    template: '<my-modal>',
                    size: 'lg',
                    resolve: {
                        items: function () {
                            return $scope.names;
                        }
                    }
                });
            };
        }];

    return {
        restrict: 'E',
        templateUrl: '/Folder/my-directive.html',
        controller: controllerFn,
        scope: {
        }
    };
}])
.directive('myModal', ['$timeout', function ($timeout) {

    var controllerFn = ['$scope', function ($scope) {
    }];

    return {
        restrict: 'E',
        templateUrl: '/Folder/my-modal.html',
        controller: controllerFn,
        scope: {
        }
    };
}]);

Answer 1

我使用类似的东西将参数发送到模态，将一个元素添加到数组并将其返回给指令。

// Directive who open modal
.directive('myDirective', ['$timeout', function ($timeout) {
    var controllerFn = ['$scope', '$uibModal', function ($scope, $uibModal) {
        // Base array
        $scope.names = ['Mario','Wario','Luigi'];

        $scope.openModal = function () {
            // Modal instance
            var modalInstance = $uibModal.open({
                animation: true,
                template: '<my-modal>',
                size: 'lg',
                controller: 'myDirectiveModalCtrl',
                controllerAs: '$modalController',
                resolve: {
                    // Provide namesInModal as service to modal controller
                    namesInModal: function () {
                        return $scope.names;
                    }
                }
            });
            // When modal close, fetch parameter given
            modalInstance.result.then(function (namesFromModal) {               
                $scope.names = namesFromModal;
            }, function () {
                // $log.info('Modal dismissed at: ' + new Date());
            });     
        };

    }];
    return {
        restrict: 'E',
        templateUrl: '/Folder/my-directive.html',
        controller: controllerFn,
        scope: {
        }
    };
}])
// Modal controller 
.controller('myDirectiveModalCtrl', ['$uibModalInstance','namesInModal',
    function ($uibModalInstance, namesInModal) {
        // Use same name set in myDirective.controllerAs
        var $modalController = this;
        // Get provided parameter as service
        $modalController.names = namesInModal;
        // Add new element
        $modalController.names.push('peach');
        // Return modal variable when close
        $modalController.ok = function () {
            $uibModalInstance.close($modalController.names);
        };
        $modalController.cancel = function () {
            $uibModalInstance.dismiss('cancel');
        };  
    }
]);