DIVの中にボタンがあります。私は2つのモーダルを開くためにng-clickを使用しています。 DIVとその他のボタンをクリックすると1つのモーダルが開きます

Question

DIVの中にボタンがあります。私は2つのモーダルを開くためにng-clickを使用しています。 1つのモーダルは、DIVをクリックすると開きます。DIVモーダルをクリックしている間は、ボタンをクリックするだけですが、ボタンをクリックすると両方のモーダルが開きます。私はモーダルに対して異なるコントローラを使用しています。

HTML

<div class="col-sm-12 row_padding_empty_both mt-10 clear" ng-if="quote.doc.status == 'Quoted'" style="cursor: pointer;" ng-repeat="quote in dbpro | filter: withInSearchOpp " ng-click="openOpp('lg',quote,'quote')"> 
      <div class="media"> 
       <div class="fleft icon-ef-2a" data-options="splash-1 splash-ef-1"> 
         <div class="pull-left thumb " > 
          <img class="media-object img-circle" src="app/images/sample_logo.png" alt=""> 
         </div> 
         {{quote.doc.parent_company.name}}</p> 
          <small class="text-lightred" >{{quote.doc.opp_name}}</small> 
          <small class="text-lightred" style="display:block">{{quote.doc.budgeted_revenue}}</small> 
         </div> 
        <div class="pull-right icons_group "> 

         <button type="button" class="btn btn-rounded-20 btn-default btn-sm" ng-click="openoppMail()" style="width:27px;"><i class="fa fa-paper-plane" ></i></button> 

        </div> 
       </div> 

      </div> 
     </div> 

モーダル-1 DIV NG-クリック機能。

$scope.openOpp = function (size,index,val) { 
     console.log("large modal"); 
     var openOppModel = $modal.open({ 
      templateUrl: 'app/views/modals/oppModal.html', 
      controller: 'oppModalInstanceCtrl', 
      size:size, 
      resolve: { 
       name: function() { 
        return index; 
       }, 
       name1: function() { 
        return val; 
       } 
      } 
     }); 

     openOppModel.result.then(function (selectedItem) { 
      console.log('saved'); 
     }, function() { 
      $log.info('Modal dismissed at: ' + new Date()); 
     }); 
    }; 

モーダル-2 ボタンngのクリック機能

$scope.openoppMail = function (size) { 

     var modalInstance = $modal.open({ 
      templateUrl: 'app/views/modals/mail.html', 
      controller: 'MailComposeCtrl', 
      size: size, 
      resolve: { 
       items: function() { 
        return $scope.items; 
       } 
      } 
     }); 

     modalInstance.result.then(function (selectedItem) { 

     }, function() { 
      $log.info('Modal dismissed at: ' + new Date()); 
     }); 
    }; 

Answer 1

ボタンハンドラに$event.stopPropagation()を追加します。

$scope.openoppMail = function ($event,size) { 
$event.stopPropagation(); 
     var modalInstance = $modal.open({ 
      templateUrl: 'app/views/modals/mail.html', 
      controller: 'MailComposeCtrl', 
      size: size, 
      resolve: { 
       items: function() { 
        return $scope.items; 
       } 
      } 
     }); 

     modalInstance.result.then(function (selectedItem) { 

     }, function() { 
      $log.info('Modal dismissed at: ' + new Date()); 
     }); 
    };