Question

我正在使用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>

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

以下是示例jsbin

请帮忙。

Answer 1

我认为就是这样：

<p>Modal Content Goes here<p>

和

<p>2<p>

不关闭标签！

<p>Modal Content Goes here</p>

和

<p>2</p>

应该修复它：Working jsbin。

Answer 2

这种方法存在一些问题。首先关闭括号，加上你的隐藏不起作用。

我已经引入了一个回调，以便您也可以设置控制器级变量。

请看这里：

http://jsbin.com/yaqilaliti/2/

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

2 个答案: