我在 DIV 中有一个按钮。我正在使用 ng-click 打开两个模态。单击 DIV 时打开一个模态，另一个按按钮打开答案

【问题标题】：I have a button inside a DIV. I'm using ng-click to open two modal. One modal open when click on the DIV and other by button我在 DIV 中有一个按钮。我正在使用 ng-click 打开两个模态。单击 DIV 时打开一个模态，另一个按按钮打开
【发布时间】：2016-11-07 07:09:40
【问题描述】：

我在 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-click 函数。

$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-click 功能

$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());
        });
    };

【问题讨论】：

点击按钮时需要防止事件传播。将 $event 传递给函数并在按钮的单击处理程序中添加 $event.stopPropagation()。
@K K，谢谢。你拯救了我的一天。

标签： html angularjs modal-dialog bootstrap-modal angularjs-ng-click

【解决方案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());
        });
    };

【讨论】：