5
Sto lavorando con la direttiva angularjs per un popup. Quando uso direttiva singola volta funziona bene ma quando uso più volte una volta non funziona. Non capisco cosa sto facendo male. Ecco il mio codice.modalDialog con direttiva in angolare, problema di ambito
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;
};
}]);
Ecco campione jsbin
prega di aiuto.