How to trigger event before closing bootstrap modal on angularjs directive - javascript

How to trigger event before closing bootstrap modal on angularjs directive ,
angular.module('app').controller("myModal", function myModal($scope, $modalInstance) {
$scope.modalInstance = $modalInstance;
});
template
< div> My modal < /div>
and directive
angular.module('app').directive('mymodal',function( $rootScope ){
return{
restrict : 'E',
replace : true,
templateUrl :'mymodal.html',
scope :{
modalInstance :'='
},
link: function (scope, elem, attr) {
scope.modalInstance.result.then(function() {
console.log('close');
}, function() {
console.log('dimiss');
});
}
});
I want to have confirm message before closing modal after click on backdrop.
call modal dialog from here
$scope.openModal = function() {
$scope.modalInstance = $modal.open({
animation: true,
template: '<mymodal modal-instance="modalInstance"></mymodal>',
controller: 'myModal',
backdrop: true,
keyboard: true,
});
}

Check out this answer, it works for me.
var instance = $modal.open(...);
instance.result.then(function(){
//Get triggers when modal is closed
}, function(){
//gets triggers when modal is dismissed.
});

Related

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>

Angular directive access template elements from controller

I'm using an angular directive to add a reusable popup to various elements. Due to styling constraints, rather than adding the popover to the element, I need to add it to the document body. I would later like to access it in my controller - how would I go about doing so?
.controller 'slUserCtrl', ($element) ->
$element.popup
hoverable: true
position: 'bottom right'
popup: # What do I put here to get the "template" DOM element?
.directive 'slUser', ($document) ->
template = $templateCache.get 'users/sl-user.html'
return {
restrict: "A"
controller: 'slUserCtrl'
compile: (elem, attrs) ->
angular.element(document.body).append template
}
When you want to display a modal popup by attaching it to the document body, you are manipulating the DOM. There is one place where DOM manipulation is Ok, and that's the directive's link function.
var app = angular.module('app',[]);
app.controller('ctrl', function($scope) {
});
app.directive('modal', function() {
return {
restrict: 'A',
transclude: 'element',
controller: function($rootScope) {
$rootScope.dialog = { show: false };
},
link: function(scope, element,attr,ctrl, transclude) {
transclude(function(clone, scope) {
scope.$watch('dialog.show', function (val) {
if (val) {
clone.css('display', 'block');
}
else {
clone.css('display', 'none');
}
});
angular.element(document.body).append(clone);
});
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
<div ng-controller="ctrl">
Hello World!
<button ng-click="dialog.show = !dialog.show">Open Modal </button> {{test}}
<div modal>
This is a modal dialog
</div>
</div>
</body>

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.

AngularJS how to create a reusable template for Bootstrap modal

So I am using the AngularJS Bootstrap modal (http://angular-ui.github.io/bootstrap/). Which is working fine but I was wondering if I could create a basic template that can take in a title and the content.
Then it would populate my template with these info. The template would have a close button, cancel button, overlay, etc. Is there an easy way to do this AngularJS?
This is taken from the example and it's about what I have. My content is in the templateUrl. It would be nice to pass in the modal template so I don't have to keep recreating the title and close buttons for every modal I create.
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
Found a way to do it with directives. It opens up a modal with a custom directive that has a template. Then whatever you have in your modal will be inserted into your custom template. This is nice because it holds more than just a message. It can be filled with forms, alert, or anything you want.
This was my directive:
app.directive('modalDialog', function() {
return {
restrict: 'E',
replace: true,
transclude: true,
link: function(scope) {
scope.cancel = function() {
scope.$dismiss('cancel');
};
},
template:
"<div>" +
"<div class='modal-header'>" +
"<h3 ng-bind='dialogTitle'></h3>" +
"<div ng-click='cancel()'>X</div>" +
"</div>" +
"<div class='modal-body' ng-transclude></div>" +
"</div>"
};
});
Modal ('yourTemplate.html'):
<modal-dialog>
<div> Your body/message </div>
</modal-dialog>
Javascript:
app.controller('YourController', ['$scope', '$modal', function($scope, $modal) {
$scope.openModal = function () {
$modal.open({
templateUrl: 'yourTemplate.html',
controller: ModalController
});
};
}]);
var ModalController = function ($scope, $modalInstance) {
$scope.dialogTitle = 'Your title';
};
Checkout John Papa's Hot Towel Angular BootStrap "template". You can pick it up from there:
https://github.com/johnpapa/HotTowel-Angular/blob/master/NuGet/HotTowel-NG/app/common/bootstrap/bootstrap.dialog.js

AngularJS directive click can only be called once

I am working on a directive to show a modal. It works the first time through but the second time or anytime after the, the click no longer works. The code looks like this:
<li><a href="http://example.com/JohnDoe" profile-modal="JohnDoe">JohnDoe</li>
EngagementApp.directive('profileModal', ['$compile', 'Request', '$modal', '$q',
function($compile, Request, $modal, $q) {
return {
restrict : 'A',
link : function(scope, element, attrs) {
element.bind('click', function(e) {
e.preventDefault();
scope.modal = {
username : attrs.profileModal,
url : main_site_url
};
var modalPromise = $modal({template: '/templates/profile.html', persist: true, show: false, backdrop: 'static', scope: scope});
$q.when(modalPromise).then(function(modalEl) {
modalEl.modal('show');
});
});
}
};
}]);
How can I get the click to work several times and not just the first time? The framework I'm using for the modal is angularstrap. http://mgcrea.github.io/angular-strap/

Categories

Resources