Question

我在<ul>（或<tr>）和其中的按钮上同时点击了一次。

如果点击该行，我想做点什么，只有点击我的按钮才能显示引导模式。

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

以下是代码（fiddle here）：

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

Answer 1

点击模式

我认为你的错误就是你点击了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的实例。该承诺可以在以后用于了解模态何时被解除/关闭。

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

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

Answer 3

正如在issue comment中所说的那样，在模态关闭后启动的第二个事件是一个全新的事件，因为模式在行中，所以“点击线” “如果我在模态外面单击以退出它（”背景“），则会启动事件。

解决方案是将模态注释移出第一次迭代（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不适用于模态（＆＃39; show＆＃39;）

3 个答案: