可視属性が複数のモーダルで定義されていません

Question

私は1つのページアプリケーションに2-3つのモーダルを含めるようにしています。しかし、私はそれらのすべてを同時に働かせることに問題があります。私の最初のモーダルは正常に動作しますが、私の2番目と3番目のモーダルは可視属性を見ることに失敗します。

これらは私のモーダルトグル関数です：

$scope.toggleModal = function(){ 
    $scope.showModal = !$scope.showModal; 
}; 

$scope.toggleTestModal = function(){ 
    $scope.showTestModal = !$scope.showTestModal;}; 

$scope.toggleBranchSelectModal = function(){ 
    $scope.showBranchSelectModal = !$scope.showBranchSelectModal; 
    console.log('$scope.showBranchSelectModal', $scope.showBranchSelectModal); 
}; 

は、これらは、これら3つのモーダルのための私のディレクティブです：

モーダル1

cicdapp.directive('modal', function() { 
return { 
    template: '<div class="modal fade">' + 
     '<div class="modal-dialog">' + 
     '<div class="modal-content">' + 
      '<div class="modal-header">' + 
      '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' + 
      '<h4 class="modal-title">{{ title }}</h4>' + 
      '</div>' + 
      '<div class="modal-body" ng-transclude></div>' + 
     '</div>' + 
     '</div>' + 
    '</div>', 
    restrict: 'E', 
    transclude: true, 
    replace:true, 
    scope:true, 
    link: function postLink(scope, element, attrs) { 
    scope.title = attrs.title; 

    scope.$watch(attrs.visible, function(value){ 
     console.log(value) 
     if(value == true) 
     $(element).modal('show'); 
     else 
     $(element).modal('hide'); 
    }); 

    $(element).on('shown.bs.modal', function(){ 
     scope.$apply(function(){ 
     scope.$parent[attrs.visible] = true; 
     }); 
    }); 

    $(element).on('hidden.bs.modal', function(){ 
     scope.$apply(function(){ 
     scope.$parent[attrs.visible] = false; 
     }); 
    }); 
    } 
}; 
}); 

モーダル2

cicdapp.directive('testmodal', function() { 
console.log('Test modal') 
    return { 
    template: '<div class="modal fade">' + 
     '<div class="modal-dialog">' + 
      '<div class="modal-content">' + 
      '<div class="modal-header">' + 
       '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' + 
       '<h4 class="modal-title">{{ title }}</h4>' + 
      '</div>' + 
      '<div class="modal-body" ng-transclude></div>' + 
      '</div>' + 
     '</div>' + 
     '</div>', 
    restrict: 'E', 
    transclude: true, 
    replace:true, 
    scope:true, 
    link: function postLink(scope, element, attrs) { 
     scope.title = attrs.title; 

     scope.$watch(attrs.visible, function(value){ 
     console.log(value) 
     if(value == true) 
      $(element).modal('show'); 
     else 
      $(element).modal('hide'); 
     }); 

     $(element).on('shown.bs.modal', function(){ 
     scope.$apply(function(){ 
      scope.$parent[attrs.visible] = true; 
     }); 
     }); 

     $(element).on('hidden.bs.modal', function(){ 
     scope.$apply(function(){ 
      scope.$parent[attrs.visible] = false;});});}};}); 

モーダル3

cicdapp.directive('branchselectmodal', function() { 
    return { 
    template: '<div class="modal fade">' + 
     '<div class="modal-dialog">' + 
      '<div class="modal-content">' + 
      '<div class="modal-header">' + 
       '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' + 
       '<h4 class="modal-title">{{ title }}</h4>' + 
      '</div>' + 
      '<div class="modal-body" ng-transclude></div>' + 
      '</div>' + 
     '</div>' + 
     '</div>', 
    restrict: 'E', 
    transclude: true, 
    replace:true, 
    scope:true, 
    link: function postLink(scope, element, attrs) { 
     scope.title = attrs.title; 

     scope.$watch(attrs.visible, function(value){ 
     if(value == true) 
      $(element).modal('show'); 
     else 
      $(element).modal('hide'); 
     }); 

     $(element).on('shown.bs.modal', function(){ 
     scope.$apply(function(){ 
      scope.$parent[attrs.visible] = true; 
     }); 
     }); 

     $(element).on('hidden.bs.modal', function(){ 
     scope.$apply(function(){ 
      scope.$parent[attrs.visible] = false; 
     }); 
     }); 
    } 
    }; 
}); 

私は、私はそれが動作しながら、attrs.visibleのための$時計内部では、その値は、モーダル2と3のために定義されていないことを考え出しログインして、モーダルを切り替え私はこれがなぜ起こっているのか考えようとしていますが、最初のケースではうまくいく理由は考えられません。これがなぜ起こっているのかについてのどんな方向性も認められるでしょう。

Answer 1

あなたが今までに得た回答に基づいて、あなたのコードを幾分リファクタリングしたように思えます。いずれにしてもコンテンツを継承しているので、各インスタンスに異なるコンテンツを与えるモーダルに対しては1つのディレクティブを推奨し、ディレクティブは独立したスコープを使用する必要があります。これはモーダルダイアログですので、完全に別のエンティティとして扱う必要があります。それは決して親に達することを試みるべきではありません。 「閉じる」、「キャンセル」、「OK」、またはモーダルを消したボタンをクリックすると、コンテナが聴くべきイベントを放つ（ブロードキャストではない）ようにしなければなりません。自分自身を棄却する、または「自己破壊する」）。