我有一個DIV內的按鈕。我正在使用ng-click打開兩個模式。一個模式打開時點擊DIV和其他按鈕

Question

我有一個DIV內的按鈕。我正在使用ng-click打開兩個模式。一個模式打開時點擊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()); 
     }); 
    };