Menu
I am working with angularjs Directive for a popup.When i use directive single time it works fine but when i use i more then one time it does not work. I don`t get 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 sample jsbin
Please help.
612
I think it's just this:
<p>Modal Content Goes here<p>
and
<p>2<p>
Not closing the tags!
<p>Modal Content Goes here</p>
and
<p>2</p>
Should fix it: Working jsbin.
146
There were couple of problems with the approach. Firstly closing brackets were missing plus your hide was not working.
I have introduced a callback so that you can set the controller level variable as well.
Please see here:
http://jsbin.com/yaqilaliti/2/
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
