角度モーダル指令 - ページが1つ以上あるときの問題

Question

私の角型アプリケーションのモーダル指令を作成しました。

modal-directive.js

'use strict'; 

backyApp.directive('appModal', function() { 
    return { 
     restrict: 'A', 
     transclude: true, 
     link: function($scope, elem, attr){ 
      $scope.modalClass = attr.appModal; 
     }, 
     scope: '@', 
     templateUrl: './components/modal/modal.html' 
    }; 
}); 

とテンプレートは次のようになります。

<div app-modal="firstModal"> 
    <div class="form-group"> 
      <input type="text" /> 
      <input type="submit" value="Submit" /> 
     </div> 
    </div> 
</div> 

<div app-modal="secondModal"> 
    <div class="form-group"> 
      <input type="text" /> 
      <input type="submit" value="Submit" /> 
     </div> 
    </div> 
</div> 

問題：（modal.html）

<!-- Modal --> 
<div class="app-modal" ng-class="modalClass"> 
    <div ng-transclude></div>    
</div> 

を今、我々はページ内の2個のモーダルを持っているふりをしましょう：私は最終的に同じクラスの2つのモーダル（上記の私の例では、secondModalは私の2つのモーダルに添付されます）

どうしてですか？私は自分のディレクティブの価値が、私が望むものを開くことができる唯一の方法なので、各モーダルに付ける必要があります。

私は、これは恐ろしい説明は何か質問

を編集している場合、私に教えてください知っている：

私はそれぞれがそれに接続されているクラスとしてその指示値を持つ、2つのapp-modal divを持っていると思いますが。今はっきりしていることを願っています。

Answer 1

ここ

backyApp.directive('appModal', function() { 
return { 
    restrict: 'A', 
    transclude: true, 
    link: function($scope, elem, attr){ 
     $scope.modalClass = attr.appModal; 
    }, 
    scope: {}, 
    templateUrl: './components/modal/modal.html' 
}; 
}); 

が、私はこの https://embed.plnkr.co/UwjBIqTh5fNlAcbIs6TS/