Having trouble properly injecting parameters into

2019-03-06 06:58发布

问题:

This is a two part question. The first part, and highest priority, is as the title suggests. I'm having a problem with $uibModal's open function, specifically injecting my parameters properly into an inline controller function.

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

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

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.

My second attempt:

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

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.

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

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.

Part two of my question is how running gulp serve-build from the VS Code Terminal minifies files. This is probably due to my noobness again, but I used to be under the impression that running gulp serve-build from VS Code essentially performed the same tasks as building in TFS. This is either not the case, or I'm doing something wrong.

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

Question 2: Does running gulp serve-build in the VS Code terminal not minify files the same as TFS?

UPDATE:

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

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'.

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

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.

UPDATE 2:

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. I'm going to post a separate question about it however to see if some light can be shed on how/why it could possibly be working now.

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 with the changes from the first update.

I am still looking for an answer to my second question, if anyone knows the answer to that.