I am new to using AngularJS. I have 4 buttons named Cancel, Deny, Success & Remove. If am I click on any button I want to show multiple message i.e. If I click on Cancel then message showing you click on Cancel button & so on.
I have follow from below link but simple alert & no controller is used in this example.
I want a A MODAL POPUP IN AN ANGULARJS DIRECTIVE example so I can understand. I have try to google it but no simple examples found.
Please help. Thanks
<!doctype html> <html ng-app="mymodal"> <body> <div ng-controller="MainCtrl"> <button ng-click="toggleModal('Success')">Success</button> <button ng-click="toggleModal('Remove')">Remove</button> <button ng-click="toggleModal('Deny')">Deny</button> <button ng-click="toggleModal('Cancel')">Cancel</button> <modal visible="showModal"> Any additional data / buttons </modal> </div> <!-- Scripts --> <script src=""></script> <script src=""></script> <script src=""></script> <!-- App --> <script> var mymodal = angular.module('mymodal', []); mymodal.controller('MainCtrl', function ($scope) { $scope.showModal = false; $scope.buttonClicked = ""; $scope.toggleModal = function(btnClicked){ $scope.buttonClicked = btnClicked; $scope.showModal = !$scope.showModal; }; }); mymodal.directive('modal', function () { return { template: '<div>' + '<div>' + '<div>' + '<div>' + '<button type="button" aria-hidden="true">×</button>' + '<h4>{{ buttonClicked }} clicked!!</h4>' + '</div>' + '<div ng-transclude></div>' + '</div>' + '</div>' + '</div>', restrict: 'E', transclude: true, replace:true, scope:true, link: function postLink(scope, element, attrs) { scope.$watch(attrs.visible, function(value){ if(value == true) $(element).modal('show'); else $(element).modal('hide'); }); $(element).on('shown.bs.modal', function(){ scope.$apply(function(){ scope.$parent[attrs.visible] = true; }); }); $(element).on('hidden.bs.modal', function(){ scope.$apply(function(){ scope.$parent[attrs.visible] = false; }); }); } }; }); </script> </body> </html> Link : 3 Answers
Built a modal popup example using syarul's jsFiddle link. Here is the updated fiddle.
Created an angular directive called modal and used in html. Explanation:-
HTML
<div ng-controller="MainCtrl"> <button ng-click="toggleModal('Success')">Success</button> <button ng-click="toggleModal('Remove')">Remove</button> <button ng-click="toggleModal('Deny')">Deny</button> <button ng-click="toggleModal('Cancel')">Cancel</button> <modal visible="showModal"> Any additional data / buttons </modal> </div> On button click toggleModal() function is called with the button message as parameter. This function toggles the visibility of popup. Any tags that you put inside will show up in the popup as content since ng-transclude is placed on modal-body in the directive template.
JS
var mymodal = angular.module('mymodal', []); mymodal.controller('MainCtrl', function ($scope) { $scope.showModal = false; $scope.buttonClicked = ""; $scope.toggleModal = function(btnClicked){ $scope.buttonClicked = btnClicked; $scope.showModal = !$scope.showModal; }; }); mymodal.directive('modal', function () { return { template: '<div>' + '<div>' + '<div>' + '<div>' + '<button type="button" aria-hidden="true">×</button>' + '<h4>{{ buttonClicked }} clicked!!</h4>' + '</div>' + '<div ng-transclude></div>' + '</div>' + '</div>' + '</div>', restrict: 'E', transclude: true, replace:true, scope:true, link: function postLink(scope, element, attrs) { scope.title = attrs.title; scope.$watch(attrs.visible, function(value){ if(value == true) $(element).modal('show'); else $(element).modal('hide'); }); $(element).on('shown.bs.modal', function(){ scope.$apply(function(){ scope.$parent[attrs.visible] = true; }); }); $(element).on('hidden.bs.modal', function(){ scope.$apply(function(){ scope.$parent[attrs.visible] = false; }); }); } }; }); UPDATE
<!doctype html> <html ng-app="mymodal"> <body> <div ng-controller="MainCtrl"> <button ng-click="toggleModal('Success')">Success</button> <button ng-click="toggleModal('Remove')">Remove</button> <button ng-click="toggleModal('Deny')">Deny</button> <button ng-click="toggleModal('Cancel')">Cancel</button> <modal visible="showModal"> Any additional data / buttons </modal> </div> <link rel="stylesheet" href=""> <!-- Scripts --> <script src=""></script> <script src=""></script> <script src=""></script> <!-- App --> <script> var mymodal = angular.module('mymodal', []); mymodal.controller('MainCtrl', function ($scope) { $scope.showModal = false; $scope.buttonClicked = ""; $scope.toggleModal = function(btnClicked){ $scope.buttonClicked = btnClicked; $scope.showModal = !$scope.showModal; }; }); mymodal.directive('modal', function () { return { template: '<div>' + '<div>' + '<div>' + '<div>' + '<button type="button" aria-hidden="true">×</button>' + '<h4>{{ buttonClicked }} clicked!!</h4>' + '</div>' + '<div ng-transclude></div>' + '</div>' + '</div>' + '</div>', restrict: 'E', transclude: true, replace:true, scope:true, link: function postLink(scope, element, attrs) { scope.$watch(attrs.visible, function(value){ if(value == true) $(element).modal('show'); else $(element).modal('hide'); }); $(element).on('shown.bs.modal', function(){ scope.$apply(function(){ scope.$parent[attrs.visible] = true; }); }); $(element).on('hidden.bs.modal', function(){ scope.$apply(function(){ scope.$parent[attrs.visible] = false; }); }); } }; }); </script> </body> </html> UPDATE 2 restrict : 'E' : directive to be used as an HTML tag (element). Example in our case is
<modal> Other values are 'A' for attribute
<div modal> 'C' for class (not preferable in our case because modal is already a class in bootstrap.css)
<div> If you are using bootstrap.js then the below code might be useful. This is very simple. Dont have to write anything in js to invoke the pop-up.
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=""> <script src=""></script> <script src=""></script> </head> <body> <div> <h2>Modal Example</h2> <!-- Trigger the modal with a button --> <button type="button">Open Modal</button> <!-- Modal --> <div> <div> <!-- Modal content--> <div> <div> <button type="button">×</button> <h4>Modal Header</h4> </div> <div> <p>Some text in the modal.</p> </div> <div> <button type="button">Close</button> </div> </div> </div> </div> </div> </body> </html> This is the simplest way to show Bootstrap 5 modals in Angular JS
var app = angular.module('myApp', []) .controller('myCtrl', function ($scope) { $scope.title = "Bootstrap Modal From HTML & Java Script(Code Behind)" $scope.openModal = function () { $('#exampleModal').modal('show'); } });<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- JQuery --> <script src=""></script> <!-- Bootstrap CSS --> <link href="" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <!-- Angular JS --> <script src=""></script> <title>Bootstrap Model Eg.</title> </head> <body ng-app="myApp"> <div ng-controller="myCtrl"> <div> <div> <h2>{{title}}</h2> <button type="button"> <b>From HTML</b> </button> <button ng-click="openModal()"><b>From Code-Behind</b></button> <!-- Modal --> <div tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div> <div> <div> <h5>Modal title</h5> <button type="button" aria-label="Close"></button> </div> <div> Model Opened Successfully.. <br>a by <b><i><u>Hritvik Sikarwar</u></i></b> <br> Thank You.. </div> <div> <button type="button">Close</button> <button type="button">Save changes</button> </div> </div> </div> </div> </div> </div> </div> <!-- Bootstrap Bundle with Popper --> <script src="" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> </body> </html>
