Develop Reference

AngularJS Doesn't Update Instantly When I push in Modal

I'm using angular ui for the modal, when I push, it enters to the array I specified but it doesn't update instantly like it should, I still have to refresh the page
<button class="btn btn-regular mustard-lighten-1 white-text" ng-click="showModal()"><span class="material-icons">add</span></button>
$scope.showModal = () => {
let modalInstance = $uibModal.open({
animated: true,
templateUrl: 'pages/modals/add-modal.html',
controller: 'homeController'
})
} // show modal on the overview page
$scope.addRule = () => {
$scope.rules.push({
// properties inside here
})

Update 1 : Try this.
$timeout(function () {
$scope.rules.push({
// properties inside here
});
},1100);
Try this, This worked for me :
$rootScope.$apply(function () {
$scope.rules.push({
// properties inside here
});
});

angular multiple $mdDialog

I work with modal tabs and I have notification pop-up window which is always shown to user when he logs into my application. It contains all events which happends when user was offline. Problem is when i click on any objects from list it close my pop-up window and display new modal tab.
I want to archieve this functionality. When user log in, notification pop-up window will be shown to user and if he clicks on any object it will open another window without closing my notification pop-up window(New events). I want something like that on picture below which I made.
I checked angular material documentation, but there is no demo at all and not even well explained how to work with multiple: true option and I dont know exactly how to make it work like I want.
https://material.angularjs.org/latest/api/service/$mdDialog
This is my code for displaying notification pop-up window.
//show new notifications when user log in
NotificationService.getUnreadedNotifications(function (data) {
//initialization
$scope.notification = [];
$scope.OverAllCount = 0;
$scope.messageNotification = [];
$scope.OverAllMessageCount = 0;
if (data.ProjectNotifications != null) {
angular.forEach(data.ProjectNotifications, function (key, value) {
$scope.notification.push(key);
$scope.OverAllCount = $scope.OverAllCount + 1;
});
}
if (data.TasksNotifications != null) {
angular.forEach(data.TasksNotifications, function (key, value) {
$scope.notification.push(key);
$scope.OverAllCount = $scope.OverAllCount + 1;
});
}
if (data.MessageNotifications != null) {
angular.forEach(data.MessageNotifications, function (key, value) {
$scope.OverAllMessageCount = $scope.OverAllMessageCount + 1;
$scope.messageNotification.push(key);
});
}
popUpNotification();
$scope.hide = function () {
$mdDialog.hide();
};
$scope.cancel = function () {
$mdDialog.cancel();
};
$scope.answer = function (answer) {
$mdDialog.hide(answer);
};
//mark notifications as readed when user click on notification
function popUpNotification() {
$mdDialog.show({
controller: NotificationController,
templateUrl: 'app/components/templates/PopUpNotification.html',
parent: angular.element(document.body),
//targetEvent: ev,
clickOutsideToClose: true,
fullscreen: false,
scope: $scope,
multiple:true,
preserveScope: true,
onComplete: function () {
$scope.notificationPopUp = $scope.notification;
}
})
.then(function () {
}, function () {
//fail
});
}
});
This is code for displaying details of object on which user clicked in new overlaying modal tab
//mark notifications as readed when user click on notification
$scope.popUpDetail = function (notification, index, ev) {
$mdDialog.show({
controller: NotificationController,
templateUrl: 'app/components/templates/TaskDetailsDialog.html',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose: true,
fullscreen: false,
scope: $scope,
multiple: true,
preserveScope: true,
onComplete: function () {
//was readed => update database
NotificationResourceService.update({ id: notification.Id }, notification);
$scope.OverAllCount -= 1;
$scope.notification.splice(index, 1);
TaskService.get({ id: notification.EntityId })
.$promise.then(function (task) {
$scope.task = task;
});
}
})
.then(function () {
}, function () {
//fail
});
}

Somehow i found working solution for my problem. It might help somebody in future.
Working code:
function popUpNotification() {
$mdDialog.show({
templateUrl: 'app/components/templates/PopUpNotification.html',
clickOutsideToClose: true,
bindToController: true,
scope: $scope,
preserveScope: true,
controller: function ($scope, $mdDialog) {
$scope.notificationPopUp = $scope.notification;
$scope.popUpDetail = function (notification, index, ev) {
$mdDialog.show({
controller: function ($mdDialog) {
this.click = function () {
$mdDialog.hide();
}
},
targetEvent: ev,
clickOutsideToClose: true,
preserveScope: true,
autoWrap: true,
skipHide: true,
scope: $scope,
preserveScope: true,
templateUrl: 'app/components/templates/TaskDetailsDialog.html',
onComplete: function () {
TaskService.get({ id: notification.EntityId })
.$promise.then(function (task) {
$scope.task = task;
});
}
})
}
},
autoWrap: false,
})
}
});

Add 'multiple: true' as a parameter:
// From plain options
$mdDialog.show({
multiple: true
});
// From a dialog preset
$mdDialog.show(
$mdDialog
.alert()
.multiple(true)
);
From documentation: https://material.angularjs.org/latest/api/service/$mdDialog

The key is using skipHide: true as parameter in the object we pass into $mdDialog.show(). I tried without multiple: true and it still works. This parameter has to be passed into the second (or nth) dialog. So it will look somethink like this:
// second dialog
$mdDialog.show({
// some fields
skipHide: true,
//some fields
});

How to close an Angular Modal from the outside controller

I am using angular-modal-service to open a modal.
$scope.showLoader = function(message) {
ModalService.showModal({
templateUrl: "/templates/loader.html",
controller: "ctrl",
inputs: {
message: "loading"
}
}).then(function(modal) {
modal.close.then(function(result) {
if (result) {
// do something
}
});
});
}
After I open this modal, I want to call a function to close it from the main controller
$scope.closeLoader = function() {
// close the modal here
}
How can I do this?

You can assign the modal closing function to the $scope when the modal is completely loaded. I added a dummy function, that it won't execute undefined if the modal is closed, before it is ready. You can also skip that, if you can assure, that it won't be possible.
$scope.closeLoader = angular.noop;
$scope.showLoader = function(message) {
ModalService.showModal({
templateUrl: "/templates/loader.html",
controller: "ctrl",
inputs: {
message: "loading"
}
}).then(function(modal) {
$scope.closeLoader = modal.close;
});
};

Below is the code:
app.controller('MainController', function($scope, close) {
$scope.close = function(result) {
close(result, 500); // close, but give 500ms for bootstrap to animate
};
});
html
<button type="button" ng-click="close('No')" class="btn btn-default" data-dismiss="modal">No</button>

Confirm angular modal closing on dirty form

I have an Angular-UI modal with a form in it. When the user triggers the dismiss event I want to implement a confirmation based on $dirty. I have searched through numerous sources to find notions on Promise and can succesfully get e.g. an alert during the closing event. However, I can't find anywhere how to actually stop the modal from closing.
EDIT:
With the current code the confirmation alert often (surprisingly not always) pops up after the modal has already been dismissed.
var editResourceModalController = function($scope, $uibModalInstance) {
$uibModalInstance.result.catch(function() {
if ($scope.editForm.$dirty) {
window.confirm("close modal?");
}
$uibModalInstance.dismiss('cancel');
});
}
var uibModalInstance;
$scope.openEditModal = function() {
uibModalInstance = $uibModal.open({
animation: true,
templateUrl: "edit.html",
controller: editResourceModalController
});
}

Add the $scope.ok method and hook it to the editForm's submit button's ng-click
var editResourceModalController = function($scope, editItem, hierarchy, selectedFolder) {
$scope.form = {};
$scope.editItem = editItem;
$scope.editListItems = [];
$scope.listItems = 0;
$scope.getNumber = function(n) {
return new Array(n);
}
$scope.hierarchy = hierarchy;
$scope.selectedFolder = selectedFolder;
$scope.editModel = {
name: $scope.editItem.name,
description: $scope.editItem.description,
hierarchyId: $scope.selectedFolder
}
$scope.ok = function () {
editItem.close($scope.editForm.$dirty);
};
}
Inject the $scope.edeitForm.$dirty as isDirty and use the injected value as you like
$scope.openEditModal = function(editItem, hierarchy, selectedFolder) {
$scope.modalInstance = $uibModal.open({
animation: true,
templateUrl: "edit.html",
controller: ["$scope", "editItem", "hierarchy", "selectedFolder", editResourceModalController],
resolve: {
editItem: function() {
return editItem;
},
hierarchy: function() {
return hierarchy;
},
selectedFolder: function() {
return selectedFolder;
}
}
});
$scope.modalInstance.result.catch(function(isDirty) {
if (isDirty) {
// confirmation code here
}else{
// other logic
}
// dismiss the modal
editItem.dismiss('cancel');
});
}
Hope this helped you :D

I fixed it using $scope.$on, extensive example here
var editResourceModalController = function($scope, $uibModalInstance) {
$scope.close = function() {
$uibModalInstance.close();
}
$scope.$on('modal.closing', function(event) {
if ($scope.editForm.$dirty) {
if (!confirm("U sure bwah?")) {
event.preventDefault();
}
}
});
}
var uibModalInstance;
$scope.openEditModal = function(editItem, hierarchy, selectedFolder) {
uibModalInstance = $uibModal.open({
animation: true,
templateUrl: "edit.html",
controller: editResourceModalController
});
}

This solution works for me.
Esc, X button on top and Close button at the bottom.
function cancel() {
if (vm.modalForm.$dirty) {
var response = DevExpress.ui.dialog.confirm("You have unsaved changes. Would you like to discard them?");
response.done(function (result) {
if (result)
vm.dismiss({ $value: 'cancel' });
});
}
else
vm.dismiss({ $value: 'cancel' });
}
$scope.$on('modal.closing', function (event, reason) {
if (reason === 'escape key press') {
var message;
if (vm.modalForm.$dirty) {
message = "You have unsaved changes. Would you like to discard them?";
if (!confirm(message)) {
event.preventDefault();
}
}
}
});

Modal Popup not Closing if multiple Modals are present

I have three different controllers and views
From Screen when button is clicked Modal1 opens
$modal.open({
templateUrl: 'abc.html',
controller: 'abcCtrl',
size: 'lg',
scope: $scope,
});
In modal1 there is next button so on Click of Next Button Want to close Modal1 and open Modal2
$scope.validate = function(isValid) {
if (!isValid) {
$scope.errors = 'Please fill-up required fields';
} else {
$scope.errors = '';
$modal.open({
templateUrl: 'Payment.html',
controller: 'PaymentCtrl',
size: 'lg',
scope: $scope,
});
}
};
In modal2 there is next button so on Click of Next Button Want to close Modal2 and open Modal3
$scope.placeOrder = function() {
$scope.cart.abc().then(function(result) {
$modal.open({
templateUrl: 'orderSummary.html',
controller: 'SummaryCtrl',
size: 'lg',
scope: $scope,
resolve: {
items: function() {
return result.data;
}
}
});
},
function(err) {
//error msg
});
};
If I add $modalInstance.close to Modal1
while Opening another modal that is Modal2, Modal1 is Closed and Modal2 is Opened But none of the buttons work. Modal3 doesnt get opened Don't Know the actual issue what is happening.
Please help me. Thanks in advance.

it seems like you are looking for wizard...
have a look here

From Main Controller First Open Your Modal1,on Close of Modal1 i.e
var modalInstance = $modal.open({
templateUrl: 'abc',
controller: 'abcCtrl',
size: 'lg',
scope: $scope,
});
modalInstance.result.then(function(result) {
$scope.def();
}, function(err) {
//
});
$scope.def = function(){
//open another
}
call another function and in that function open another modal and similarly you can do.