event.stopPropagation 不适用于模态 ('show')

Question

我同时单击了 <ul>（或 <tr>）和其中的按钮。

如果我点击该行，我想做一些事情，如果我点击我的按钮，只显示一个 bootstrap 模态。

问题是，对于按钮代码声明的modal('show')，当我的模态消失时，即使按钮代码中有event.stopPropagation()，该行代码仍然执行。

<ul>
    <li ng-repeat="item in items" ng-click="clickLine(item)">
        Just a test <button ng-click="clickButton(item, $event)">{{item}}</button><button ng-click="clickAlert(item, $event)">alert {{item}}</button>
        <div class="modal fade comment_{{item}}" tabindex="-1" role="dialog">
            <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    Test {{item}}
                </div>
            </div>
            </div>
        </div>
    </li>
</ul>

$scope.clickLine = function(item) {
    alert('line : '+item);
};
$scope.clickButton = function(item, event) {
    angular.element('.comment_'+item).modal('show');
    event.stopPropagation();
};
$scope.clickAlert = function(item, event) {
    alert('Click alert: '+item);
    event.stopPropagation();
};
$scope.items = ['One', 'two', '3'];

在这里，当我点击第一个按钮时，模态显示，当我点击外部以使其消失时，clickUl 代码自行执行！而点击第二个按钮只会执行 clickAlert 代码...

有什么理由吗？ bootstrap 错误？

Answer 1

点击模式

我认为你的错误是你给了 ng-click on ng-repeat 。你必须给它的按钮。这是实时代码：https://jsfiddle.net/3drpkwpk/8/

然后不要不必要地使用 event.stopPropagation() 它会阻止你的其他 html 默认事件函数。

        <li ng-repeat="item in items" ng-click="">

            Just a test 
  <button ng-click="clickButton(item, $event);clickUl(item)">{{item}}</button><button ng-click="clickAlert(item, $event);clickUl(item)">alert {{item}}</button>
            <div class="modal fade comment_{{item}}" tabindex="-1" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-body">
                            Test {{item}}
                        </div>
                    </div>
                </div>
            </div>
        </li>

Answer 2

在我看来，添加 Angular Bootstrap 模块 (http://angular-ui.github.io/bootstrap/) 可以获得更好的实现。您可以使用方法创建模式，即使在堆栈中也是如此。

真的很简单，只需添加模块，注入 $modal 服务并创建一个包含承诺的实例。稍后可以使用该 promise 来了解模态何时 dismissed/closed.

var modalInstance = $modal.open({
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl',
  size: size,
  resolve: {
    items: function () {
      return $scope.items;
    }
  }
});

modalInstance.result.then(function (selectedItem) {
  $scope.selected = selectedItem;
}, function () {
  $log.info('Modal dismissed at: ' + new Date());
});

笨蛋： http://plnkr.co/edit/QLDFx3nmqSwD9M5Vcqob?p=preview

Answer 3

如issue comment中所述，模态关闭后启动的第二个事件是一个全新的事件，因为模态是在行，所以"click on line" 如果我在模态外部单击以退出它 ("backdrop")，则会启动事件。

解决方案是将模态注释移出第一次迭代 (full fiddle here):

<div ng-app="myApp">
    <div ng-controller="TestCtrl">
        <ul>
            <li ng-repeat="item in items" ng-click="clickLine(item)">
                Just a test <button ng-click="clickButton(item, $event)">{{item}}</button><button ng-click="clickAlert(item, $event)">alert {{item}}</button>
            </li>
        </ul>
        <div ng-repeat="item in items" class="modal fade comment_{{item}}" tabindex="-1" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        Test {{item}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

或不重复模态 (full fiddle here):

<div ng-app="myApp">
    <div ng-controller="TestCtrl">
        <ul>
            <li ng-repeat="item in items" ng-click="clickLine(item)">
                Just a test <button ng-click="clickButton(item, $event)">{{item}}</button><button ng-click="clickAlert(item, $event)">alert {{item}}</button>
            </li>
        </ul>
    </div>
    <div class="modal fade globalModal" tabindex="-1" role="dialog" ng-controller="GlobalModalCtrl">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" ng-bind="globalModalService.title"></h4>
                </div>
                <div class="modal-body" ng-bind="globalModalService.body">
                </div>
            </div>
        </div>
    </div>
</div>

$scope.clickButton = function(item, event) {
    globalModalService.show('Test title', 'Test '+item);
    event.stopPropagation();
};

通过这种全局模式处理：

.controller('GlobalModalCtrl', function(globalModalService, $scope) {
    $scope.globalModalService = globalModalService;
})
.factory('globalModalService', function() {
    var globalModalService = {
        body: null,
        title: null,
        show: function(title, body) {
            globalModalService.body = body;
            globalModalService.title = title;
            angular.element('.globalModal').modal('show');
        }
    };
    return globalModalService;
})

event.stopPropagation 不适用于模态 ('show')

event.stopPropagation doesn't work for a modal('show')

modal-dialog

twitter-bootstrap

angularjs