javascript - ngClick on Bootstrap's Modal component - Stack Overflow

I have the following snippet:

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=".3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src=".1.1/jquery.min.js"></script>
<script src=".3.6/js/bootstrap.min.js"></script>
<script src=".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>

I have the following snippet:

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./bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn./bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis./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>

As you can see I added data-ng-click="dismissCurrentItem" on each dismiss button on the modal, but dismissCurrentItem() is never getting called, as if Bootstrap is intercepting my close event and not delegating it to angular.

How can I add a click handler for these buttons? If that can't be done, how can I add a handler to the modal's close / dismiss event?

• javascript
• angularjs
• twitter-bootstrap

Share Follow asked Dec 1, 2015 at 17:52 Matias CiceroMatias Cicero 26.3k2121 gold badges9090 silver badges160160 bronze badges 3

• 1 Is there a reason you aren't use UI.Bootstrap? This can then be handled via the directive's controller's close/dismiss methods? ref - angular-ui.github.io/bootstrap/#/modal – jusopi Commented Dec 1, 2015 at 18:00
• @jusopi No reason at all. I was unaware of UI Bootstrap until you mentioned it. I'll give it a try – Matias Cicero Commented Dec 1, 2015 at 18:02
• I think @xersiee found your issue. Re: UI Bootstrap, I'd suggest that if you're going to be doing any extensive angular + bootstrap stuff, you might as well drink the cool-aid and use UI.Bootstrap as it has angularized all the mon UXs, allowing you to do things in a more opinionated & angular way. I've found that when I buck the NG way, it bites me in the long run. – jusopi Commented Dec 1, 2015 at 18:29

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

You can, of course, try UI Bootstrap but problem with your code is more trivial that you thought - you need to call dismissCurrentItem in ng-click attribute (use parenthesis) like this:

data-ng-click="dismissCurrentItem()"