如何将参数注入 $uibModal 中的内联控制器函数

Question

我在使用 $uibModal 的 open 函数时遇到问题，特别是将我的参数正确地注入到内联控制器函数中。

作为 angularjs 新手，我尝试了一些方法，none 我可以开始工作。

我正在使用 Visual Studio 代码来编写 angular，并使用 gulp 来构建它。

我的第一次尝试（使用内联函数）：

var modalInstance = $uibModal.open({
    animation: false,
    templateUrl: 'app/workform/LoanActions/LoanActionOverpay.modal.html',
    controller: function ($scope, $uibModalInstance) {
        $scope.showOverpay = true;
        $scope.OverpayAccount = function () {
            $scope.loading = true;
            var key = loanKeyFactory.getLoanKey();

            loanFactory.getLoanInformation(key).then(function (response) {
                $scope.loanType = response.LoanType;
                $uibModalInstance.dismiss('cancel');

                if ($scope.loanType == 'LineOfCredit')
                    ChooseLocLoanStatus();
                else
                    CreatePayment(true, null);
            });
        };
        $scope.cancel = function () {
            $uibModalInstance.dismiss('cancel');
            ClearForm();
        }
    },
    size: 'md',
    backdrop: 'static',
    keyboard: false
})

我在 VS Code 中运行 gulp serve-build 时没有收到任何错误，并且代码按预期执行。但是，在 TFS 中构建和发布后，我会收到此错误： [$injector:unpr] Unknown provider: eProvider <- e.

我的第二次尝试：

var modalInstance = $uibModal.open({
    animation: false,
    templateUrl: 'app/workform/LoanActions/LoanActionOverpay.modal.html',
    controller: OverpayCtrl,
    size: 'md',
    backdrop: 'static',
    keyboard: false
})

var OverpayCtrl = function ($scope, $uibModalInstance) {
    $scope.showOverpay = true;
    $scope.OverpayAccount = function () {
        $scope.loading = true;
        var key = loanKeyFactory.getLoanKey();
        loanFactory.getLoanInformation(key).then(function (response) {
            $scope.loanType = response.LoanType;
            $uibModalInstance.dismiss('cancel');
            if ($scope.loanType == 'LineOfCredit') {
                ChooseLocLoanStatus();
            }
            else {
                CreatePayment(true, null);
            }
        });
    };
    $scope.cancel = function () {
        $uibModalInstance.dismiss('cancel');
        ClearForm();
    };
}

我收到了与我第一次尝试相同的结果，即在 VS Code 中运行 gulp serve-build 时没有错误，并且代码按预期执行。但是在 TFS 中构建和发布后我收到了同样的错误： [$injector:unpr] Unknown provider: eProvider <- e.

经过几次失败的尝试（我将在 space 上省略保存）后，我返回并对我的第一次尝试进行了更多研究。感谢 and this post, I discovered that due to minification, I needed to adjust how I was injecting my $scope and $uibModalInstance parameters into my inline controller function. 上接受的答案，接受的答案建议使用扩展语法。

我最后的尝试，以及我现在的位置：

var modalInstance = $uibModal.open({
    animation: false,
    templateUrl: 'app/workform/LoanActions/LoanActionOverpay.modal.html',
    controller: ['$scope, $uibModalInstance', function ($scope, $uibModalInstance) {
        $scope.showOverpay = true;
        $scope.OverpayAccount = function () {
            $scope.loading = true;
            var key = loanKeyFactory.getLoanKey();

            loanFactory.getLoanInformation(key).then(function (response) {
                $scope.loanType = response.LoanType;
                $uibModalInstance.dismiss('cancel');

                if ($scope.loanType == 'LineOfCredit')
                    ChooseLocLoanStatus();
                else
                    CreatePayment(true, null);
            });
        };
        $scope.cancel = function () {
            $uibModalInstance.dismiss('cancel');
            ClearForm();
        }
    }],
    size: 'md',
    backdrop: 'static',
    keyboard: false
})

虽然我在 VS Code 中没有收到任何构建错误，但在尝试执行代码时收到此错误：[$injector:unpr] Unknown provider: $scope, $uibModalInstanceProvider <- $scope, $uibModalInstance.

我希望有人可以分享一些关于我做错了什么的见解。

问题：如何将参数注入内联控制器函数？

更新：

在查看我的代码（我最后的尝试）时，我意识到了一些事情。

首先是当我将参数作为字符串注入时，我并没有将它们作为单独的字符串注入，即 '$scope, $uibModalInstance' 而不是 '$scope', '$uibModalInstance'。

我注意到的第二件事是我没有注入 loanKeyFactory 或 loanFactory，它们都在函数中使用。

进行这些更改后，我认为它肯定会起作用。但和以前一样，我可以让它在本地构建和执行，但不是在 TFS 中构建和发布之后。我收到了与之前相同的 [$injector:unpr] Unknown provider: eProvider <- e 错误。

更新 2：

好吧，所以我不认为我要疯了。但是我的一位同事问我是否可以为他重现错误，以便他看一看。我去了 TFS 将项目发布到的我们的测试服务器，但我无法让它 NOT 工作！没错，它现在神奇地起作用了。从昨天开始，我构建并发布了一个单独的项目。之后，我构建并发布了之前无法正常工作的 same 代码，现在可以了。我不完全理解如何在相同的代码上进行新的构建和发布 "fixed"，但我没有抱怨。

Answer 1

万一有人在这里试图弄清楚如何将参数注入内联控制器，最终起作用的是我最后一次尝试使用扩展语法和第一次更新的更改。

var modalInstance = $uibModal.open({
    animation: false,
    templateUrl: 'app/workform/LoanActions/LoanActionOverpay.modal.html',
    controller: ['$scope', '$uibModalInstance', 'loanKeyFactory', 'loanFactory', function ($scope, $uibModalInstance, loanKeyFactory, loanFactory) {
        $scope.showOverpay = true;
        $scope.OverpayAccount = function () {
            $scope.loading = true;
            var key = loanKeyFactory.getLoanKey();

            loanFactory.getLoanInformation(key).then(function (response) {
                $scope.loanType = response.LoanType;
                $uibModalInstance.dismiss('cancel');

                if ($scope.loanType == 'LineOfCredit')
                    ChooseLocLoanStatus();
                else
                    CreatePayment(true, null);
            });
        };
        $scope.cancel = function () {
            $uibModalInstance.dismiss('cancel');
            ClearForm();
        }
    }],
    size: 'md',
    backdrop: 'static',
    keyboard: false
})

如何将参数注入 $uibModal 中的内联控制器函数

How to inject parameters into an inline controller function in $uibModal

tfs

minify

angularjs

angularjs-controller

gulp