event.stopPropagation不适用于模式（“ show”）

debugcn 发表于 Dev

安东尼·奥（Anthony O.

我同时在<ul>（或<tr>）和其内部的按钮上单击ng 。

如果我单击该行，我想做点什么，如果单击我的按钮，则只显示一个引导程序模态。

问题是，对于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代码...

有什么理由吗？引导程序错误？

安东尼·奥（Anthony O.

正如，上述问题的评论，该模式被关闭后启动第二个事件是一个完整的新的，因为模式是在该行，所以“点击行”活动启动，如果我点击的模式外，退出它（“背景”）。

解决方案是将模式注释从第一次迭代中移出（此处完全摆弄）：

<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>

或不重复模态（此处为小提琴）：

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