I've got my modal window in Angular JS. Could some body answer me how to add blur effect to body when I open this modal window.
vm.OpenLogin = function () {
var data = loginWizardService.getData().then(function (response) {
$("#loginWizard").append($compile(response.data)($scope));
$rootScope.modalInstance = $uibModal.open({
templateUrl: templUrl,
controller: OpenLoginWizardCtrl,
backdrop: 'static',
keyboard: false
});
});
};
Add a property called, backdropClass to $uibModal.open() method and give a class name
backdropClass: 'newClass'
backdropClass (Type: string) - Additional CSS class(es) to be added to a modal backdrop template.
$rootScope.modalInstance = $uibModal.open({
templateUrl: templUrl,
controller: OpenLoginWizardCtrl,
backdrop: 'static',
keyboard: false,
backdropClass: 'newClass'
});
Give this Css to that class,
.newClass
{
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
filter: url("https://gist.githubusercontent.com/amitabhaghosh197/b7865b409e835b5a43b5/raw/1a255b551091924971e7dee8935fd38a7fdf7311/blur".svg#blur);
}
So, the above class is added as a back-drop and the CSS is for adding BLUR effet to it.
Maybe someone knows a more correct solution to this problem. But I found a solution for myself.
(function () {
'use strict';
angular
.module('app.modal.window.open.service', [])
.factory('$modalWindowService', $modalWindowService);
$modalWindowService.inject = ["$http", "$uibModal", "$compile"];
function $modalWindowService($http, $uibModal, $compile) {
var modalInstance;
return {
openModal: function (urn, id, templateId, controller) {
$http({
method: 'GET',
url: urn
}).success(function (data, $scope) {
$("#" + id).append($compile(data)($scope));
modalInstance = $uibModal.open({
templateUrl: templateId,
controller: controller,
backdrop: 'static',
keyboard: false
});
return;
}).error(function () {
alert("error");
return null;
});
document.getElementById('main').classList.add("blur");
},
closeModal: function (templateId, controller) {
if (modalInstance !== undefined) {
modalInstance.close({
templateUrl: templateId,
controller: controller
});
}
document.getElementById('main').classList.remove("blur");
}
}
}
})();
enjoy it :)
Related
I try to open a modal with the uibModal (https://angular-ui.github.io/bootstrap/#!#%2Fmodal) but I want to have one modal with custom text inside.
i'm trying to open the modal like this :
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: '/crims/thermofluor/experiments/components/modal.html',
size: 'sm',
controller: 'ModalController',
resolve: {
content: function () {
return 'test';
}
}
});
With this controller :
angular
.module('thermofluor')
.controller('ModalController', ModalController)
ModalController.$inject = ['$uibModal', '$uibModalInstance'];
function ModalController($uibModal, $uibModalInstance, content) {
var $ctrl = this;
$ctrl.content = content;
$ctrl.ok = function () {
$uibModalInstance.close();
};
$ctrl.cancel = function () {
$uibModalInstance.dismiss();
};
}
But it seems not work, angular says that ModalController is not a function (in the modal opening ), so what can I do to get this works ?
Edit : I can do that without a ModalController :
$uibModal.open({
animation: true,
ariaLabelledBy: 'modal-title-bottom',
ariaDescribedBy: 'modal-body-bottom',
templateUrl: 'components/modal.html',
size: 'sm',
controller: function($scope) {
$scope.content = 'bottom';
}
});
But the buttons of my modal doesn't work
Edit
This finally works, here is how I do this :
function openModal(templateName, content, title){
var template = 'components/modal/'+templateName;
$uibModal.open({
animation: true,
ariaLabelledBy: 'modal-title-bottom',
ariaDescribedBy: 'modal-body-bottom',
templateUrl: template,
size: 'sm',
controllerAs: '$ctrl',
controller: function($scope, $uibModalInstance) {
$scope.content = content;
$scope.title = title;
var $ctrl = this;
$ctrl.ok = function () {
$uibModalInstance.close();
};
$ctrl.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
}
});
}
Finally I found a solution, here is what I do :
I create a service ModalService :
angular.module('myModule')
.factory('ModalService', ModalService);
ModalService.$inject = ['$uibModal'];
function ModalService($uibModal) {
return new ModalService();
function ModalService(){
var service = this;
function openModal(templateName, params){
var template = 'components/modal/'+templateName;
$uibModal.open({
animation: true,
ariaLabelledBy: 'modal-title-bottom',
ariaDescribedBy: 'modal-body-bottom',
templateUrl: template,
size: 'sm',
controllerAs: '$ctrl',
controller: function($scope, $uibModalInstance) {
angular.forEach(params, function (e, key){
$scope[key] = e;
});
var $ctrl = this;
$ctrl.ok = function () {
$uibModalInstance.close();
};
$ctrl.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
}
});
}
return {
openModal: openModal
};
}
}
And I use it like this in my controller :
ModalService.openModal("modal.html", {"content": "This experiment doesn't have a tm point", "title": "Tm Point"});
I can pass every variable I need and just set them in my modal html template
I have a situation in the application, where I want to load an already available modal, in an iFrame of another application using the same codebase. For this I have used the following code :
new-user-module.js
(function () {
'use strict';
angular
.module('mo.pages.new-user.layouts', ['ui.router', 'ui.bootstrap', 'mo.pages.new-user.services'])
.config(['$stateProvider', newUserRouteConfiguration]);
function newUserRouteConfiguration($stateProvider) {
$stateProvider
.state('new-user', {
url: '/new-user',
onEnter: [
'mo.pages.new-user.services.NewUserPageService', function (newAttachmentPageService) {
newAttachmentPageService.openAttachmentModal();
}
]
});
}})();
new-user-service.js
(function () {
'use strict';
angular
.module('mo.pages.new-user.services')
.service('mo.pages.new-user.services.NewUserPageService', NewUserPageServiceFactory);
NewUserPageServiceFactory.$inject = [
'$stateParams',
'$modal'
];
function NewUserPageServiceFactory($stateParams, $modal) {
var service = {
openUserModal: openUserModal
};
return service;
function openUserModal() {
return function () {
$modal.open({
templateUrl: 'modules/pages/shared/modals/new-user/new-user-modal.html',
controller: 'mo.pages.shared.modals.NewUserModalController as vm',
windowClass: 'new-user-modal',
resolve: {
headerText: function() {
return 'header';
}
},
backdrop: 'static',
size: 'lg'
});
};
}
}})();
The issue, I am facing is that, the modal is loading, when the '/new-user' is getting called in the iFrame, but the templateUrl is not loading.
Check your console, I think you may find an error with your call to newAttachmentPageService.openAttachmentModal();
Since NewUserPageServiceFactory is registered as a service and not really a factory, it should not return anything. You should just be adding the method to the service object, for example:
function NewUserPageServiceFactory($stateParams, $modal) {
this.openUserModal = function() {
return function () {
$modal.open({
templateUrl: 'modules/pages/shared/modals/new-user/new-user-modal.html',
controller: 'mo.pages.shared.modals.NewUserModalController as vm',
windowClass: 'new-user-modal',
resolve: {
headerText: function() {
return 'header';
}
},
backdrop: 'static',
size: 'lg'
});
};
}
}
For a good illustration of the (slight) differences between services and factories see here
Let me know if this works
In my controller.js file I have:
angular.module('App').controller('AppCtrl', AppCtrl);
function AddApp(){
var vm = this;
vm.resetForm = resetForm;
function resetForm(){
vm.myForm.$setPristine();
}
}
...
function openModal(message){
var errorMessage = message;
var modalInstance = $modal.open({
templateUrl: 'url',
controller: 'AppCtrl',
controllerAs: 'App',
resolve: {
errorMessage: function () {
return errorMessage;
}
}
});
}
and in my modal I have
<div ng-controller="AppCtrl as App">
<form name=App.myForm>
...
when I use this format it tells me that
vm.myForm is undefined.
This is the closest thing I've found here, but it still did not work for me
Can I access a form in the controller?
You can pass the form by adding it to the resolve:
var modalInstance = $modal.open({
templateUrl: 'url',
controller: 'AppCtrl',
controllerAs: 'App',
resolve: {
errorMessage: function () {
return errorMessage;
},
myForm: function() {
return vm.myForm;
}
}
});
In your modal controller:
angular.module('app').controller('AppCtrl',
['$scope', 'errorMessage', 'myForm',
function ($scope, errorMessage, myForm) {
console.log(myForm);
}]
);
i had to replace my md-dialog with an angular model UI bootstrap. in the md-dialog, i used the locals attribute to send anguler.copy, from the main controller into the dialog controller.
my question is, how do i get the same result with modal UI bootstrap?
md-dialog code (the old version)
$scope.notefullScreen=function(event){
$mdDialog.show({
controller: DialogNoteFullscreenController,
templateUrl: 'views/schedule/note-fullscreen.html',
targetEvent:event,
locals: {
editNote: angular.copy($scope.noteEdit),
editPtivacy:angular.copy($scope.privacyOptions),
detailsFull:$scope.details
}
}).then(function () {
}, function () {
});
modal ui code: ( in progress new version, what i have so far)
$scope.notefullScreenNew = function (event) {
var modalInstance = $modal.open({
templateUrl: 'views/schedule/schedule-extended-note-popup.html',
controller: ScheduleService.NotePopupCtrl,
targetEvent: event,
resolve: {
editNote: function () { return angular.copy($scope.noteEdit); },
editPtivacy: function() { return angular.copy($scope.privacyOptions); },
detailsFull: function(){return $scope.details;}
// locals: {
// editNote: angular.copy($scope.noteEdit),
// editPtivacy: angular.copy($scope.privacyOptions),
// detailsFull: $scope.details
// attachmentFull:angular.copy($scope.attachment)
}
});
modalInstance.result.then(function () {
}, function () {
});
};
angular-ui-bootstrap can resolve locals for the modal controller through the resolve attribute. These will then be available to your modal controller function as function parameters.
To adapt this to your scenario, it would become:
var modalInstance = $modal.open({
templateUrl: 'views/schedule/schedule-extended-note-popup.html',
controller: ScheduleService.NotePopupCtrl,
targetEvent: event,
resolve: {
editNote: function()( {
return angular.copy($scope.noteEdit);
},
editPtivacy: function() {
return angular.copy($scope.privacyOptions)
},
detailsFull: function() {
return $scope.details;
}
}
});
These will then be passed into your NotePopupCtrl as function parameters with the same name (just like the injections);
Sidenotes: I assume your attribute editPtivacy was supposed to be editPrivacy, also I don't think angular-ui-bootstrap supports the targetEvent attribute.
I am using a bootstrap modal
Controller.js -
$scope.open = function() {
var modalInstance = $modal.open({
animation: true,
templateUrl: 'views/template.html',
controller: 'controller2',
resolve: {
items: function() {
return $scope.values;
}
}
});
modalInstance.result.then(function(values) {
$scope.new_value = values;
}, function() {
});
};
I don't want to create a new controller since the modal should show values which are constantly changing in the current controller. What should I pass in place of controller2 if I modal to be in the same controller?
You could use the scope option instead of the controller:
$scope.open = function() {
var modalInstance = $modal.open({
animation: true,
templateUrl: 'views/template.html',
scope: $scope,
resolve: {
items: function() {
return $scope.values;
}
}
});
modalInstance.result.then(function(values) {
$scope.new_value = values;
}, function() {
});
};