5
Tôi đang làm việc với angularjs Chỉ thị cho một popup.Khi tôi sử dụng chỉ thị thời gian duy nhất nó hoạt động tốt nhưng khi tôi sử dụng i nhiều hơn sau đó một thời gian nó không hoạt động. Tôi không hiểu tôi đang làm gì sai. Đây là mã của tôi.modalDialog với chỉ thị trong góc, vấn đề phạm vi
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;
};
}]);
Đây là mẫu jsbin
Xin vui lòng giúp.