Question

我有以下代码段：

＆＃13;

angular.module('app', [])
  .controller('itemViewCtrl', ['$scope',
    function($scope) {

      $scope.items = ['Apple', 'Orange', 'Banana'];

      $scope.selectItem = function(item) {
        $scope.currentItem = item;
        jQuery('#item-modal').modal();
      };

      $scope.dismissCurrentItem = function() {
        console.log('Dismissing current item...');
        // This is not getting called when closing the modal
      };
    }
  ]);

＆＃13;

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="app" data-ng-controller="itemViewCtrl">
  <ul>
    <li data-ng-repeat="item in items">
      <a data-ng-click="selectItem(item)">{{item}}</a>
    </li>
  </ul>
  <div id="item-modal" class="modal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" data-ng-click="dismissCurrentItem" aria-label="Close"><span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">{{currentItem}}</h4>
        </div>
        <div class="modal-body">
          This is the modal content and item's description.
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal" data-ng-click="dismissCurrentItem">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

正如您所看到的，我在模态上的每个关闭按钮上添加了data-ng-click="dismissCurrentItem"，但dismissCurrentItem()永远不会被调用，就好像Bootstrap正在拦截我的关闭事件而不是将其委托给角色。

如何为这些按钮添加点击处理程序？如果无法完成，我该如何为模态的close / dismiss事件添加处理程序？

Answer 1

当然，您可以尝试使用UI Bootstrap，但是您的代码问题更加微不足道 - 您需要在dismissCurrentItem属性中调用ng-click（使用括号），如下所示：

data-ng-click="dismissCurrentItem()"

ng点击Bootstrap的模态组件

1 个答案: