Question

当打开bootstrap ui模式时，如果你更喜欢使用指令，而不是单独使用templateUrl和controller，那么你怎么能在模态指令的控制器中访问{ {1}}为了关闭模态或你需要做什么？另外，我们如何通过$uibModalInstance而不必将其作为模板上的属性添加？

items

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');
        };  
    }
]);

Answer 2

在指令的link函数中，范围对象上有$ uibModalInstance。

在指令中使用$ uibModalInstance

2 个答案: