Angular modal指令 - 當頁面中有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' 
    }; 
}); 

和模板看起來是這樣的：（modal.html）

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

現在，讓我們假設我們有2個情態動詞在一個頁面：

<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> 

問題：我結束了2個模態具有相同的類（在我上面的示例中，secondModal將附加到我的兩個模態）

爲什麼會發生這種情況？我需要我的指令的價值被附加到每個模式，因爲這是我可以打開我想要的唯一方法。

我知道這是可怕的解釋讓我知道，如果你有

編輯任何問題：

我想有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' 
}; 
}); 

這裏使用一個孤立的範圍是plunker我做了這個 https://embed.plnkr.co/UwjBIqTh5fNlAcbIs6TS/