I am trying to pass values to a modal over parameters. For some reason this parameter is always undefined when I try to access it in my controller. The second answer of this question is what I am building upon.
Here is my setup for the modal. Please note that $scope.evaluationResult is defined and has valid content.
$scope.showEvaluationResult = function() {
var modalInstance = $modal.open({
templateUrl: 'evaluation-result/evaluation-result-dlg.html',
controller: 'EvaluationResultDialogCtrl',
windowClass: 'evaluation-result-dlg',
size: 'lg',
resolve: {
evaluationResult: function() {
return $scope.evaluationResult;
}
}
});
setupKeyHandling(modalInstance);
}
Here is my controller:
/**
* The controller for displaying evaluation results.
*/
annotatorApp.controller('EvaluationResultDialogCtrl', ['$scope', '$modal', '$modalInstance', '$http',
function ($scope, $modal, $modalInstance, $http, evaluationResult) {
$scope.trainingLog = {
text: ''
};
$scope.close = function () {
$modalInstance.close();
};
$scope.evaluationResult = evaluationResult; // Always undefined
}]);
What is the problem here?
You forgot to put it in injection array, should be:
annotatorApp.controller('EvaluationResultDialogCtrl', ['$scope', '$modal', '$modalInstance', '$http', 'evaluationResult',
function ($scope, $modal, $modalInstance, $http, evaluationResult) {
Related
how can i call angular ui bootstrap modal popup from inside another controller , as the condition is like instead of calling from view i need to call it from inside a function
App.controller('MailFolderController', ['$scope', '$http', '$timeout', '$stateParams', '$window', 'mails', '$interval', function ($scope, $http, $timeout, $stateParams, $window, mails, $interval) {
$scope.check = function(){
console.log("call parent ==========>")
// call open method in modal popup here
}
App.controller('orderCancellationController', ['$scope', '$modal', function ($scope, $modal) {
$scope.open = function (mail) {
var modalInstance = $modal.open({
templateUrl: '/orderCancellationBox.html',
controller: ModalInstanceCtrl,
resolve: {
mail: function () {
return mail;
}
}
});
};
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
var ModalInstanceCtrl = function ($scope, $modalInstance, mail) {
$scope.mail = mail;
$scope.submit = function () {
$scope.$parent.check();
$modalInstance.close('closed');
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
ModalInstanceCtrl.$inject = ["$scope", "$modalInstance", 'mail'];
}]);
}]);
so i want to call the open method in orderCancellationController from inside the check method , help !!
Following the example from my comment: Angular Calling Modal Open function from one controller to another
In order to open the modal from another controller you have to create a service, I did so in my app.js file, like so:
myApp.service('modalProvider',['$modal', function ($modal) {
this.openPopupModal = function () {
var modalInstance = $modal.open({
templateUrl: '/orderCancellationBox.html',
controller: 'ModalInstanceCtrl'
});
};
}]);
Then in the controller I wish to open my modal from, I inject the 'modalProvider' service, like so:
App.controller('MailFolderController', ['$scope', '$http', '$timeout', '$stateParams', '$window', 'mails', '$interval','modalProvider', function ($scope, $http, $timeout, $stateParams, $window, mails, $interval, modalProvider) {
// function to open modal
$scope.check = function(){
modalProvider.openPopupModal();
}
I am trying to use AngularUI modal's and I cannot seem to figure out why it is not resolving my variables.
Function that opens the modal and the modal instance
$scope.openModal = function (size, cert) {
var modalInstance = $modal.open({
template: 'ModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
certs: function () {
return $scope.certification;
}
}
});
modalInstance.result.then(function () {});
};
Modal Controller some stuff in here is leftover from debugging
angular.module('myApp').controller('ModalInstanceCtrl', ['$scope', '$filter', '$modalInstance', function ($scope, $filter, $modalInstance, certs) {
console.log(certs);
var results = $filter('filter')(certs, {id: id})[0];
$scope.cert = results;
$scope.ok = function () {
$modalInstance.close();
};
}]);
The main issue is that when it gets into the controller I am getting undefined for certs even though it should be resolved by the openModal function. I was following the official angular UI tutorial on how to do them here: Angular UI Bootstrap Modals
In your injection of 'certs' into your controller, you need to add it to the name declaration as well as the function.
angular.module('myApp').controller('ModalInstanceCtrl', ['$scope', '$filter', '$modalInstance', 'certs', function ($scope, $filter, $modalInstance, certs) {
I have a following ambiguity in AngularJS.
I'm using AngularJS ui Modal and provide
controller about this modal. From this controller
I want to access variable from other scope. What is
a angular way to do this? Here is my code:
controllers.controller('ResultCtrl', ['$scope', '$routeParams', '$http', '$q', 'Matches', '$modal',
function ($scope, $routeParams, $http, $q, Matches, $modal) {
/**
* other code
*
* from this scope i can access
* $scope.terms
*/
$scope.mergeTerms = function() {
var ModalInstanceCtrl = function ($scope, $modalInstance) {
/**
* Here I want to access
* $scope.terms as a above
* function
*/
}
}
});
Best regards.
If you are sure, that your ModalInstanceCtrl controller will always be inside your ResultCtrl you could use $scope.$parent.terms, however this might not always be the case.
when using Angular-ui modal, you can pass objects which can be injected into your modal controller:
$scope.modalInstance = $modal.open({
templateUrl: 'modal.html',
controller: 'ModalInstanceCtrl',
resolve: {
terms: function() {
return $scope.terms;
}
}
});
By doing this, you can simply inject terms into controller:
var ModalInstanceCtrl = function ($scope, $modalInstance, terms) {
$scope.terms = terms;
/**
* Here I can access $scope.terms in terms
* which was injected into this controller
*/
}
You'll need to pass it into the Modal Instance Controller so that it can resolve it within it's own scope. Something like this:
var modalInstance = $modal.open({
resolve: {
terms: function () {
return $scope.terms;
}
}
});
Live example see this plunker.
For short, $modal here:
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalCtrl',
resolve: {
value: function() { return value; }
}
});
Below code can't get $scope.model.value set
app.controller('ModalCtrl', ['$scope', '$modalInstance',
function($scope, $modalInstance, value) {
$scope.model = {value : value};
...
But following code can
app.controller('ModalCtrl', function($scope, $modalInstance, value) {
$scope.model = {value : value};
...
That's weird to me.
You must write all arguments inside the inline annotation:
app.controller('ModalCtrl', ['$scope', '$modalInstance', 'value',
function($scope, $modalInstance, value) {
The modal in angular-ui example is implemented with a ModalInstanceCtrl inside a ModalDemoCtrl controller like so:
var ModalDemoCtrl = function ($scope, $modal, $log) {
$scope.open = function () {
var modalInstance = $modal.open({
...
controller: ModalInstanceCtrl,
...
});
...
};
};
var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
...
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
};
When trying this approach by registering the Controllers with angular like so:
app.controller('ModalInstanceCtrl', ['$scope', '$modal', '$log',
function ($scope, $modalInstance, items) {
...
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
}]);
app.controller('ModalDemoCtrl', ['$scope', '$modal', '$log', 'ModalInstanceCtrl',
function ($scope, $modal, $log, ModalInstanceCtrl) {
$scope.open = function () {
var modalInstance = $modal.open({
...
controller: ModalInstanceCtrl,
...
});
...
};
}]);
I get the following error:
Error: Unknown provider: ModalInstanceCtrlProvider <- ModalInstanceCtrl
Should it be possible to nest controllers like this in angular?
You don't need to inject ModelInstanceCtrl into your ModalDemoCtrl. The controller definition should be
app.controller('ModalDemoCtrl', ['$scope', '$modal', '$log',
function ($scope, $modal, $log) {
It should work without this too. If it does not try
var modalInstance = $modal.open({
...
controller: 'ModalInstanceCtrl',
...
});