I am working with the angularjs directive for a popup. When I use the directive once, it works fine, but when I use it more than once, it does not work. I do not understand what I am doing wrong. Here is my code.
HTML
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body ng-app='ModalDemo'> <div ng-controller='MyCtrl'> <button ng-click='toggleModal()'>Open First Dialog</button> <button ng-click='toggleModal1()'>Open Second Dialog</button> <modal-dialog info='modalShown' show='modalShown' width='400px' height='60%'> <p>Modal Content Goes here<p> </modal-dialog> <modal-dialog show='modalShown1' info='modalShown1' width='400px' height='60%'> <p>2<p> </modal-dialog> </div> </body> </html>
Js
app = angular.module('ModalDemo', []); app.directive('modalDialog', function() { return { restrict: 'E', scope: { show: '=info' }, replace: true, // Replace with the template below transclude: true, // we want to insert custom content inside the directive link: function(scope, element, attrs) { scope.dialogStyle = {}; if (attrs.width) scope.dialogStyle.width = attrs.width; if (attrs.height) scope.dialogStyle.height = attrs.height; scope.hideModal = function() { scope.show = false; }; }, template: "<div class='ng-modal' ng-show='show'><div class='ng-modal-overlay' ng-click='hideModal()'></div><div class='ng-modal-dialog' ng-style='dialogStyle'><div class='ng-modal-close' ng-click='hideModal()'>X</div><div class='ng-modal-dialog-content' ng-transclude></div></div></div>" }; }); app.controller('MyCtrl', ['$scope', function($scope) { $scope.modalShown = false; $scope.toggleModal = function() { $scope.modalShown = !$scope.modalShown; }; $scope.modalShown1 = false; $scope.toggleModal1 = function() { $scope.modalShown1 = !$scope.modalShown1; }; }]);
Here is a jsbin example
Please, help.
source share