如何将参数注入 $uibModal 中的内联控制器函数 [英] How to inject parameters into an inline controller function in $uibModal

问题描述

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

I'm having a problem with $uibModal's open function, specifically injecting my parameters properly into an inline controller function.

作为 angularjs 的菜鸟，我尝试了几件事情，但没有一件能奏效.

Being the angularjs noob that I am, I've tried several things, none of which I can get to work.

我正在使用 Visual Studio Code 编写 angular，然后使用 gulp 来构建它.

I'm using Visual Studio Code to write the angular, and gulp to build it.

我的第一次尝试(使用内联函数):

My first attempt (using an inline function):

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] 未知提供者:eProvider <- e.

I received no errors when running gulp serve-build from within VS Code, and the code executed as expected. However, after building and releasing in TFS, I would receive this error: [$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] 未知提供者:eProvider <- e.

I received the same results as my first attempt, i.e. no errors when running gulp serve-build from within VS Code, and the code executed as expected. But I received the same error after building and releasing in TFS: [$injector:unpr] Unknown provider: eProvider <- e.

为了节省空间，我将省略几次失败的尝试后，我回去对我的第一次尝试进行了更多研究.感谢这篇文章上的公认答案和这篇文章，我发现由于缩小，我需要调整如何将 $scope 和 $uibModalInstance 参数注入到我的内联控制器函数中.此接受的答案建议使用扩展语法.

After a couple more failed attempts that I'll omit to save on space, I went back and did some more research on my first attempt. Thanks to the accepted answers on this post 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. This accepted answer suggests using the extended syntax.

我的最后一次尝试，以及我现在所处的位置:

My final attempt, and where I'm at now:

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.

Though I didn't receive any build errors from within VS Code, when attempting to execute the code I received this error: [$injector:unpr] Unknown provider: $scope, $uibModalInstanceProvider <- $scope, $uibModalInstance.

我希望有人能分享一些关于我做错了什么的见解.

I'm hoping somebody can share some insight as to what I'm doing wrong.

问题:如何将参数注入到内联控制器函数中?

Question: How do I inject parameters into an inline controller function?

更新:

在查看我的代码(我的最后一次尝试)时，我意识到了一些事情.

While looking through my code (my final attempt) I realized a couple things.

第一个是当我将参数作为字符串注入时，我没有将它们作为单独的字符串注入，即 '$scope, $uibModalInstance' 而不是 '$scope', '$uibModalInstance'.

The first was that when I was injecting my parameters as strings, I wasn't injecting them as individual strings, i.e. '$scope, $uibModalInstance' instead of '$scope', '$uibModalInstance'.

我注意到的第二件事是我没有注入 loanKeyFactory 或 loanFactory，这两者都在函数中使用.

The second thing I noticed was that I wasn't injecting loanKeyFactory or loanFactory, both of which are being used within the function.

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

After making these changes I thought for sure it would work. But same as before, I could get it to build and execute locally, but not after building and releasing in TFS. I received the same [$injector:unpr] Unknown provider: eProvider <- e error as before.

更新 2:

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

Ok, so I don't think I'm going crazy. But one of my co-workers asked if I could reproduce the error for him so he could take a look. I went to our testing server where TFS releases the project to, and I couldn't get it to NOT work! That's right, it's magically working now. Since yesterday, I built and released a separate project. After that, I built and released the same code that was previously not working, and now it is. I don't fully understand how doing a new build and release on the same code could have "fixed" it, but I'm not complaining.

推荐答案

如果有人最终在这里试图弄清楚如何将参数注入到内联控制器中，那么最终有效的是我使用扩展语法和与第一次更新相比发生了变化.

In-case anybody ends up here trying to figure out how to inject parameters into an inline controller, what ultimately worked is my final attempt using the extended syntax with the changes from the first update.

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 中的内联控制器函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！