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.
Question: How do I inject parameters into an inline controller function?
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.
