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;
}
}
});
Related
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) {
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 page with the Controller_1
the Controller_1 open a modal with a different controller on a different file that we call Controller_2
and then the Controller_2 open another modal that have a different controller on a different file that we call Controller_3
so we have:
Controller_1 --Open Modal--> Controller_2 --Open Modal--> Controller_3
when i close the modal with the Controller_3, I want to pass a value to the Controller_1.
my code:
Controller_1 open a modal with the Controller_2
app.controller("Controller_1", ['$scope', '$http', '$modal',
function ($scope, $http, $modal) {
$scope.openModal_1 = function () {
var modalInstance = $modal.open({
templateUrl: '/SomeFolder/FileWithController_2',
controller: 'Controller_2',
});
}
}]);
Controller_2 open a modal with the Controller_3
app.controller("Controller_2", ['$scope', '$http', '$modalInstance', '$modal',
function ($scope, $http, $modalInstance, $modal) {
$scope.SaveSomething = function () {
$http.post(url, obj)
.success(function (data) {
var modalInstance = $modal.open({
templateUrl: '/SomeFolder/FileWithController_3',
controller: 'Controller_3',
}
});
}).error(function () {
});
};
}]);
Controller_3 save something then close and pass some data to the Controller_1
app.controller("Controller_3", ['$scope', '$http', '$modalInstance',
function ($scope, $http, $modalInstance) {
$scope.SaveSomething = function () {
$http.post(url, obj)
.success(function (data) {
... pass some code to Controller_1 and close this modal.
});
}).error(function () {
});
};
}]);
Assuming that everything is working fine and all I want to do is passing some data from Controller_3 to Controller_1.
My question is:
How I can pass the data from Controller_3 to Controller_1?
I already tried pass the $scope when I open the modal as follows:
//from Controller_1 to Controller_2
var modalInstance = $modal.open({
templateUrl: '/SomeFolder/FileWithController_2',
controller: 'Controller_2',
scope: $scope,
});
in this case it work only for the Controller_2, so any modification on $scope will affect the Controller_1 but it is not working the same way if i do the same for Controller_3
I tried $emit and $on but it do not work too because they are not parent and child like this:
<div ng-controller="ParentCtrl">
<div ng-controller="ChildCtrl"></div>
</div>
they are complete different controllers in different files.
See $parent in Angular doc
Declare your modal instance,
var modalInstance = $modal.open({
templateUrl: '/SomeFolder/FileWithController_3',
controller: 'Controller_3',
scope: $scope.$parent,
});
So you can basically call a method or edit a property from controller_1 in your controller_3.
app.controller("Controller_3", ['$scope', '$http', '$modalInstance',
function ($scope, $http, $modalInstance) {
app.controller("Controller_3", ['$scope', '$http', '$modalInstance',
function ($scope, $http, $modalInstance) {
$scope.SaveSomething = function () {
$http.post(url, obj)
.success(function (data) {
$scope.$parent.modethodToCall(data);
})
.error(function () {});
};
}]);
I think you have to add another $parent because $modal create it's own child $scope. If someone can confirm ?
I personnaly won't recommand to use parent properties/methods. In my projects i create modal instance with params and return an object on modal closure. (See $modal in Angular ui doc)
$modalInstance.close(data);
You may use events and listen to these events.
Follow bellow an example:
app.controller('controller1', ['$scope','$rootScope', controller1]);
function controller1($scope, $rootScope){
$scope.$on('informController1', informController1);
function informController1(information){
//information displayed on the controller 1 related view
$scope.ctrl1Information = information;
}
}
app.controller('controller2', ['$scope','$rootScope', controller2]);
function controller2($scope, $rootScope){
//controller2 logic
}
app.controller('controller3', ['$scope','$rootScope', controller3]);
function controller3($scope, $rootScope){
$scope.$on('informController3', informController3);
function informController3(information){
//information displayed on the controller 3 related view
$scope.ctrl3Information = information;
}
function closeModal(){
//close modal code...
$rootScope.$broadcast('informController1', $scope.ctrl3Information);
}
}
For this approach to work, you have to make sure the controller is loaded when the event was triggered.
I am new with Angularjs , here is my code,
angular.module('remoteApp')
.controller('ScreensavertabCtrl', function ($scope, $modal, $log, $state,Screensaverchpwservice,
Screensaverchpwgetservice) {
$scope.screensaverData = {
screensaver:{
pwProtect: '1'
}
};
$scope.pwProtectOpen = function () {
if($scope.screensaverData.screensaver.pwProtect == true){
var modalInstance = $modal.open({
templateUrl: 'pwProtectModalContent.html',
controller: pwProtectModalInstanceCtrl
});
}
};
var pwProtectModalInstanceCtrl = function ($scope, $modalInstance) {
$scope.pwProtectCancel = function () {
$modalInstance.dismiss('cancel');
console.log($scope.screensaverData.screensaver.pwProtect)
};
};});
when I enable pwProtectCancel function , I want to get $scope.screensaverData.screensaver.pwProtect
value, I tried to use '$scope.$parent.screensaverData.screensaver.pwProtect' is not work?
I am so confused about that,
anyone ideas?
Change you $modal service call to
var modalInstance = $modal.open({
templateUrl: 'pwProtectModalContent.html',
controller: pwProtectModalInstanceCtrl
scope:$scope
}
and you should get the data no the modal scope.
The documentation mentions about scope option
scope - a scope instance to be used for the modal's content (actually
the $modal service is going to create a child scope of a a provided
scope). Defaults to $rootScope
The default it gets is rootscope.