Pass data from a controller to the $uibModal controller angularjs - angularjs

Question

I have a page HTML that has a button "alta", when I click that button it shows an other template as a popup and in this popup, I need values of the first page fields.
here is the function of the button "alta" in the first controller:
function altaFiltro(){
//pop up
alert(vm.filtros.codigo);
$uibModal.open({
templateUrl : 'app/entities/peticion/altaFiltro.html',
size : 'md', // sm, md, lg
controller: "FiltrosCtrl",
controllerAs : 'fil',resolve: {
filtrosVm : function() {
return vm.filtros.codigo
}
}
});
}
in the controller "FiltrosCtrl" of my template model i have:
angular.module('mecenzApp').controller('FiltrosCtrl', FiltrosCtrl);
FiltrosCtrl.$inject = [ '$scope','$uibModalInstance','Filtros'];
function FiltrosCtrl($scope, $uibModalInstance,Filtros, filtrosVm) {
var fil = this;
fil.cancelar = cancelar;
function cancelar() {
$uibModalInstance.close();
};
fil.guardar = guardar;
function guardar(){
alert(filtrosVm);
if(fil.filtros.nombre!=null){
Filtros.update(fil.filtros);
$uibModalInstance.close();
}
}
}
so I want to get the vm.filtros.codigo value but it gives me an error saying that it's not defined and this is normal because it is not defined in this sub-controller (if I can call it like that)

Answer 1

You could use the resolve property to solve this.
$uibModal.open({
templateUrl : 'app/entities/peticion/altaFiltro.html',
size : 'md', // sm, md, lg
controller: "FiltrosCtrl",
controllerAs : 'fil',
resolve: {
filtrosVm : function() {
return vm.filtros.codigo
}
}
});
Then filtrosVm will appear as a dependency for your Modals's controller.
function FiltrosCtrl($scope, $uibModalInstance,Filtros, filtrosVm) {
var fil = this;
fil.cancelar = cancelar;
function cancelar() {
$uibModalInstance.close();
};
fil.guardar = guardar;
function guardar(){
alert(filtrosVm);
if(fil.filtros.nombre!=null){
Filtros.update(fil.filtros);
$uibModalInstance.close();
}
}
}

Answer 2

You pass items to the modal instance by using resolve:
Much like this:
resolve: {
Filtros: function () {
return $scope.Filtros;
}
}
Here is a Plunk that does that

Answer 3

finaly it works now i get 2 fields values here is the code:
parent controller:
vm.altaFiltro = altaFiltro;
function altaFiltro(){
//pop up
alert(vm.filtros.codigo+"/iniciativa="+vm.filtros.nombreinic);
$uibModal.open({
templateUrl : 'app/entities/peticion/altaFiltro.html',
size : 'md', // sm, md, lg
controller: "FiltrosCtrl",
controllerAs : 'vm',
resolve : {
codigo : function() {
return vm.filtros.codigo;
} ,
iniciativa : function() {
return vm.filtros.nombreinic;
} ,
}
});
}
model controller:
FiltrosCtrl.$inject = [ '$scope','$uibModalInstance','Filtros','codigo','iniciativa'];
function FiltrosCtrl($scope, $uibModalInstance, Filtros,codigo,iniciativa) {
var vm = this;
vm.cancelar = cancelar;
function cancelar() {
$uibModalInstance.close();
};
vm.guardar = guardar;
function guardar(){
alert("GUARDAR:"+codigo+"/iniciativa="+iniciativa);
vm.filtros.codigo = codigo;
vm.filtros.nombreinic = iniciativa;
if(vm.filtros.nombre!=null){
Filtros.update(vm.filtros);
$uibModalInstance.close();
}
}
}
Thank you so much guys !