ngClick on Bootstrap's模态组件

ngClick on Bootstrap's Modal component

本文关键字：模态 组件 on Bootstrap ngClick      更新时间：2023-09-26

我有以下片段：

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

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

如何为这些按钮添加单击处理程序？如果不能做到这一点，我如何向模态的关闭/驳回事件添加一个处理程序？

当然，您可以尝试UI引导，但代码的问题比您想象的要小——您需要在ng-click属性中调用dismissCurrentItem（使用括号），如下所示：

data-ng-click="dismissCurrentItem()"
相关文章：