modalDialog,带有角度,范围问题的指令

Question

modalDialog,带有角度,范围问题的指令

sag*_*r43 5 javascript angularjs angularjs-directive

我正在使用angularjs指令弹出窗口.当我使用指令单次时它工作正常,但当我使用我更多,然后一次它不起作用.我不知道我做错了什么.这是我的代码.

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>

Run Code Online (Sandbox Code Playgroud)

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;
      };
    }]);

Run Code Online (Sandbox Code Playgroud)

这是样本jsbin

请帮忙.