Angular modal- pass params from one controller to another
12,133
You can pass more than one data in resovle function.
$scope.open = function() {
var modalInstance = $uibModal.open({
templateUrl: 'myModl.html',
controller: 'ModalInstanceCtrl',
resolve: {
param: function () {
$log.log($scope.dt)
return {'data':$scope.data,'yourData' : yourData };
}
}
});
};
app.controller('ModalInstanceCtrl', function($scope, $modalInstance, param) {
// $scope.inputValue = param.data;
$scope.data = param.data;
$scope.yourData = param.yourData;
$scope.ok = function() {
$modalInstance.close();
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
});
Author by
Sarit Rotshild
Updated on June 05, 2022Comments
-
Sarit Rotshild almost 2 years
I have to put several params to the controller of the modal so I can display the value from some in[uts in the modal
var app = angular.module('myApp', ['ui.bootstrap']); app.controller('ctrlTags', function($scope, $uibModal, $log){ // $scope.items = tagsData; $scope.data = { repeatSelect: null, availableOptions: [ {id: '1', name: 'Option A'}, {id: '2', name: 'Option B'}, {id: '3', name: 'Option C'} ], }; $scope.myVar = false; $scope.show = function () { $scope.myVar = false; } $scope.hide = function () { $scope.myVar = true; } $scope.open = function() { var modalInstance = $uibModal.open({ templateUrl: 'myModl.html', controller: 'ModalInstanceCtrl', resolve: { param: function () { $log.log($scope.dt) return $scope.data; } } }); }; $scope.ok = function() { $scope.showModal = false; }; $scope.cancel = function() { $scope.showModal = false; }; });
The controller of the modal:
app.controller('ModalInstanceCtrl', function($scope, $modalInstance, param) { // $scope.inputValue = param; $scope.data = param $scope.ok = function() { $modalInstance.close(); }; $scope.cancel = function() { $modalInstance.dismiss('cancel'); }; });
I have to display more values except the data. How can I pass more params to the modal controller?