如何在$ 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编写角度，并用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] Unknown provider: 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] Unknown provider: 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屋！