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

时间:2019-02-28 16:28:46

标签: angularjs tfs gulp minify angularjs-controller

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

作为我的angularjs新手,我尝试了几件事,但我都无法上班。

我正在使用Visual Studio Code编写角度,并用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

在我尝试了几次失败的尝试以节省空间之后,我回去对第一次尝试进行了更多研究。感谢对this postthis post的回答,我发现由于缩小,我需要调整将$scope$uibModalInstance参数注入到内联控制器中的方式功能。 This接受的答案建议使用扩展语法。

我的最后尝试,以及现在的位置:

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'

我注意到的第二件事是我没有注入loanKeyFactoryloanFactory,这两个函数都在使用。

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

更新2:

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

1 个答案:

答案 0 :(得分:0)

万一有人最终试图弄清楚如何将参数注入到内联控制器中,最终的工作是我最后一次尝试使用扩展语法以及从第一次更新以来的更改。

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
})