I have the following AngularJS below which opens up a dialog and I type into 2 input fields and press ok() which will write the values of the inputs to my $scope.
This works but when I open the modal again and enter more details into the input fields and click ok() I am trying to add this to the current input object in my $scope but instead it is just over-writing it.
var theApp = angular.module('theApp', []);
var app = angular.module('theApp', ['ui.bootstrap']);
app.controller('MenuSideController', ['$scope','$modal','$log', function($scope, $modal, $log) {
var ModalInstanceCtrl;
$scope.createmarker = function () {
var modalInstance = $modal.open({
templateUrl: 'template/modal-add-marker.html',
controller: ModalInstanceCtrl,
resolve: {},
scope: $scope.$new()
});
modalInstance.result.then(function (selectedItem) {
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
ModalInstanceCtrl = function ($scope, $modalInstance) {
$scope.input = [];
$scope.ok = function () {
$modalInstance.close($scope.input);
console.log($scope);
$scope.gps = "";
$scope.title = "";
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
$scope.plotmarkers = function($scope) {
console.log($scope);
};
}]);
Check out my code in Plunker
I would add/change to modalInstance:
modalInstance.result.then(function (selectedItem) {
$scope.keys.push({title: selectedItem.titley, gps:selectedItem.gps, desc:selectedItem.desc});
}
Demo Plunker
You are just using the reference address to the value, if you use angular.copy(your-object) it will create a new instance that will not be overridden when you reopen the modal.
I'm not sure I understand your question, but I think what you're trying to do is have the modal push selections into an array in the parent controller? If so, you simply need to change your modalInstance.result.then function to something like this
var ModalDemoCtrl = function ($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.selected = {};
$scope.selected.items = [];
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected.items.push(selectedItem);
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
};
For a full working example, see here: http://plnkr.co/edit/IA8qTX29DDIS1jXqx3gw?p=preview
Related
I have a function that is called from a modal, the function takes a value and puts it in a text box. The function works when I call from the page but when I call from the modal does not work.
$scope.accept = function (id) {
console.log($scope.nomco);
$scope.NIF = id;
//$scope.modalOptions.close();
};
And the button:
<button ng-click="accept('prueba');"><strong>Seleccionar</strong></button>
Take a look at the example from the ui-bootstrap page.
//main page controller
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.animationsEnabled = true;
$scope.open = function (size) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
$scope.toggleAnimation = function () {
$scope.animationsEnabled = !$scope.animationsEnabled;
};
});
// Modal controller
//see how the data is being passed from the main controller to the modal controller
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$uibModalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
Brand new to Angular. I have a controller that when I add it to my list of script files on in index.html page, my site stops working and I get blank pages for all of my views. I'm not sure what I'm doing wrong? I'm adding the controller to my index.html file like this
<script src="app/components/common/ModalDemoCtrl.js"></script>
And I'll paste my controller code below if that's part of the problem.
var app = angular.module('crm.ma', ['ngAnimate', 'ui.bootstrap']);
app.controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.animationsEnabled = true;
$scope.open = function (size) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
$scope.toggleAnimation = function () {
$scope.animationsEnabled = !$scope.animationsEnabled;
};
});
app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
If anyone could help me that'd be great. Thanks in advance.
The service $uibModal has been introduced very lately, in version 0.14.0 of ui-bootstrap. I guess you are still on a version < 0.14.0 of ui-bootstrap, therefore, replace:
$uibModal
with
$modal
Or update ui-bootstrap to 0.14+
I am using Bootstrap modal. I am currently showing some information in a modal. If the user clicks Cancel on the modal, I want to show a confirmation modal on top of it. How can I achieve this?
Here is my sample code:
angular.module('modalApp', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'templates/myModalContent.html',
controller: ModalInstanceCtrl,
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
};
var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
if(confirm('Do you want to continue')) {
alert('ok');
} else {
$modalInstance.dismiss('cancel');
}
};
};
In the place of Javascript confirm, I want to show another bootstrap modal confirm.
The following code is right from angular-ui getting started page: http://angular-ui.github.io/bootstrap/#/getting_started. I've modified it for a log in modal and would like to call the API that authorizes the user before the dialog is closed.
var ModalDemoCtrl = function ($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
};
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
Here is where I'd like to be able to call the service. But I haven't been able to get the function to access anything I have that's external to it. It seems to recognize objects (hence items), but if I inject a service into ModalDemoCtrl I'm getting an undefined error when I try to access it.
var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
I believe this was answered previously somewhere on Stack, but even better here is a Plunkr for a concrete example:
http://plnkr.co/edit/4GcKLz?p=preview
angular.module('app', ['ui.bootstrap']).
service('DataService', ['$rootScope',
function($rootScope) {
this.data = {};
this.data.message = 'This is a message from a service';
this.data.items = ['item1', 'item2', 'item3'];
}
]).
controller('myModal', ['$scope', '$modalInstance', 'DataService',
function($scope, $modalInstance, dataService) {
$scope.data = dataService.data;
$scope.message = dataService.data.message;
$scope.items = dataService.data.items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function() {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
}
]).
controller('appController', ['$scope', '$modal', '$log', 'DataService',
function($scope, $modal, $log, dataService) {
$scope.data = dataService.data;
$scope.showModal = function() {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'myModal'
});
modalInstance.result.then(function(selectedItem) {
$scope.selected = selectedItem;
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};
}
]);
HTH!
I am using angular bootstrap UI for modal pop up. My requirement is that when user clicks on "delete" link,first modal pop should open and when user click ok then delete rest API is called which is used to delete record. But for that I need to pass record id to my delete function.
So how can I pass record id to modal insta controller as I am calling this function when user click ok button on modal pop up. Here is my code.
`$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function (size,billingID) {
console.log("in model instance" + billingID);
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
console.log("in model instance result" + billingID + selectedItem );
}, function () {
$log.info('Modal dismissed at: ' + new Date());
console.log('Modal dismissed at: ' + new Date() );
});
};
var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.billingID=billingID;
$scope.ok = function ( billingID) {
$modalInstance.close($scope.selected.item);
deleteCC(billingID);
};
$scope.cancel = function () {
console.log("in model instance cancel");
$modalInstance.dismiss('cancel');
};
};
`
I am able to obtain my billing id in open()But how can I access same building id in my ModalInstanceCtrl ?
Add it to resolve object while creating modal instance
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
size: size,
resolve: {
items: function () {
return $scope.items;
},
billingID: function () {
return billingID
}
}
});
did you mean from angular controller you want to call a service so answer is here,
var app = angular.module('app', []);
app.controller('appController', ['$scope', 'appService' function($scope, appService)
{
$scope.message = appService;
}]).
factory('appService', function()
{
retutn function()
{
'from service message Hi!! ';
}
});