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 .
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+
Hi I am brand new to AngularJS and I can't figure out how to open a modal dialog. It's making me nuts! Can anyone please tell me what I'm doing wrong? My controller code is below:
updated code:
buttonh:
<button class="btn default-btn advancedbtn" ng-click="vm.openModal()">Advanced</button>
angular.module('crm.ma').controller('ModalDemoCtrl', function ($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.animationsEnabled = true;
$scope.openModal = function (size) {
var modalInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl: 'topnav_advancedmodal.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());
});
};
});
plunker link: http://plnkr.co/edit/MeUnAqQf1FLHMhVJ8cGI?p=catalogue
Check out ngDialog at https://likeastore.github.io/ngDialog/
Dialogs in web applications are bit different than in desktop applications and the edge cases are many. ngDialog does a good job of solving many of these issues in one nice package.
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.animationsEnabled = true;
$scope.open = function (size) {
var modalInstance = $modal.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 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