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!! ';
}
});
Related
I am using the angular ui modal model to make my modal service. Everything works except when clicking on the ok and cancel buttons, console tells me
TypeError: $uibModal.dismiss is not a function
at Scope.ModalController.$scope.cancel (table-todos-modal.controller.js:21)
here is my modal controller.
(function() {
'use strict';
angular
.module('chamAppApp.table-todos')
.controller('ModalController', ModalController);
ModalController.$inject = ['$scope', '$uibModal', 'items'];
/* #ngInject */
function ModalController($scope, $uibModal, items) {
$scope.title = 'ModalController';
$scope.category = items;
$scope.ok = function() {
$uibModal.close();
};
$scope.cancel = function() {
$uibModal.dismiss('cancel');
};
activate();
////////////////
function activate() {
console.log('checking if this works');
}
}
})();
Thank you very much!
You need a $modalInstance to call .dismiss() and .ok().
Here is a complete working example for you:
http://plnkr.co/edit/6djuhA8ohMkrWW7zohg1?p=preview
You should do something like this in order to make it work.
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());
});
I have a single page application where all the content loads inside different Bootstrap modals on top of the main HTML.
I'm currently using Angular and angular-ui-bootstrap modals.
The other problem is that the modals have no permalinks. Here's the modal controller:
angular.module('inventarioNgApp')
.controller('WorldCtrl', function($scope, $uibModal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.animationsEnabled = true;
$scope.open = function(size) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'views/modal.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;
};
});
angular.module('inventarioNgApp')
.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');
};
});
Any idea on how to generate permalinks for the modals?
create route for modals and open the model popup on using $scope.open(); on initial load of controller .
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');
};
});
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.
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